0成本，跨境电商小白也能拥有自己的独立站（GitHub+Hexo搭建）

时间：2023-04-23 11:24:02 | 来源：网站运营

时间：2023-04-23 11:24:02 来源：网站运营

0成本，跨境电商小白也能拥有自己的独立站（GitHub+Hexo搭建）：今天介绍的是不花一分钱也能拥有自己的独立站，不需要服务器，是一种完全免费的建站方式，借助的是GitHub代码托管平台和Hexo建站模板，主要分为以下几部分：

• 常见问题
• GitHub账号注册登录及使用教程
• Hexo环境及模板安装
• 更改Hexo主题，搭建个人独立站
  

第一部分、注意事项

这部分我先写在前面，不太懂没关系，看到后面遇到问题时，再回来看一下即可。

1、hexo+GitHub建站的逻辑

整个流程就是本地将 *.md 渲染成静态文件，然后Git推送到GitHub的repository，再同步网站根目录。

2、有的时候有一些插件安装不了，可以试一下淘宝镜像安装，方法如下：（前两行的意思是注册一个淘宝号，最后一行的是插件安装）

淘宝镜像安装

$ npm install -g cnpm--registry=https://registry.npm.taobao.org

$ npm config set registry https://registry.npm.taobao.org

$ cnpm install hexo-renderer-sass --save

3、配置文件_config.yml有两个，本文所指的博客配置文件_config.yml，路径为E:/username/_config.yml；主题配置文件_config.yml，路径为E:/username/themes/matery/_config.yml 。

4、Git控制台输入命令时，要注意是如下形式的，如果不是，则按“Ctrl+C”停止当前运行，然后再输入命令即可。

5、在git控制台输入命令，hexo g ，然后再输入命令 hexo s ，浏览器打开 http://localhost:4000/ ，就能看到我们安装好的主题了，“Ctrl+C”结束本地运行，输入命令 hexo d ，可上传到GitHub上，通过域名可直接访问。（注：这几个命令以后会经常用到，一般本地运行是hexo s，修改之后，最后要生成页面后再上传至GitHub，命令是 hexo g -d）

6、大部分运行Git控制台都是在根目录下新建的文件夹内进行的。

第二部分：GitHub账号注册登录及使用教程

一、注册并登陆GitHub账号（推荐使用谷歌浏览器）

注册网址： https://github.com/

注意：不要用qq邮箱，收不到认证邮件。

二、在GitHub上新建一个仓库

1、登陆新注册的GitHub账号后，点击网页右上角的「New repository」

2、填写仓库名，格式必须是「你的 http://username.github.io」才能被识别（也就是一个邮箱只能有一个仓库）

3、绑定自己的域名，之前直接输入“ http://username.github.io”是可以访问的，不知道是不是最近服务器又被偷了，不能访问了，但是绑定自己的域名是可以访问的，参照之前的文章-免费一级域名注册申请及域名解析教程，在GitHub绑定域名方法如下：

①、进入你的仓库，点击最后的设置。

拉到后面，看到custom domain，填入你的域名，加不加www，都可以。

第三部分：Hexo环境及模板安装，搭建独立站

1、下载安装Notepad++，网上随便下载一个就好，

下载地址： https://notepad-plus-plus.org/downloads/

2、安装Node.js软件（版本至少是nodejs 6.9，最好安装最新版本的），就像正常安装软件一样，都是默认选项，一直点下一步，完成安装。

下载网址： https://nodejs.org/en/

最后安装好之后，按Win+R打开本机“运行”，输入cmd，点击确定，输入node -v和npm -v，如果出现版本号，那么就安装成功了。

3、安装Git软件

下载地址： https://github.com/waylau/git-for-win

在根目录下点击鼠标右键“Git Bash Here”，输入命令 "git --version"，出现版本号，表明安装成功。

4、安装Hexo

在根目录下新建一个文件夹（名称为英文，简短一些，我新建的名称是username），点击鼠标右键“Git Bash Here”， 打开git的控制台窗口，以后我们所有的操作都在Git控制台进行，就不要用Windows自带的控制台了。

官方网址： https://hexo.io/

定位到该目录下，输入 npm install hexo-cli -g，安装Hexo（鼠标右键粘贴）。会有几个报错，无视它就行，出现如下信息，表示安装成功了。

初始化文件夹，输入 hexo init <目录名>，我这里输入的就是hexo init username，等待一会儿。

最后出现“INFO Start blogging with Hexo!”表明安装成功。可以看到之前的空文件夹，已经有文件了。

输入 cd <文件夹名称>，切换到文件夹的控制台，我这里输入的是 cd username，可以看到上面的路径，从根目录变成了文件夹的路径，

然后输入npm install 继续安装。

目前已经基本安装好了， 输入“ hexo g”生成静态页面，然后再输入“hexo s”，运行一下看一下，浏览器输入下面红框内的网址，注意直接用鼠标右键复制，不要按“Ctrl+C”，如果按了“Ctrl+C”，就直接停止了，看不到结果了。

浏览器内输入 http://localhost:4000/，看到的就是安装好的主题。

5、将博客发布到GitHub Page上

①、按“Ctrl+C”，先停止本地浏览，再安装一个插件，在命令行输入 npm install hexo-deployer-git --save （注意git后面有一个空格）。

②、将本地Git和GitHub关联起来，命令行输入 ssh-keygen -t rsa -C "GitHub注册时的邮箱"，一直回车三次，生成SSH密钥。

开始，点击，打开个人文件夹，找到.SSH文件夹，鼠标右键，打开 id_rsa.pub 文件夹，建议使用Notepad++打开，把密钥全部复制

回到GitHub，点击头像，点击Settings。

选择SSH and GPG keys

点击 New SSH key

粘贴刚才的密钥，title可以随意填写，点击Add SSH key。

然后回命令行，检查是否连接成功。

输入命令， ssh -T git@github.com 等一会儿，出现如下界面，表明连接成功。

命令hexo g 是生成静态网页， 命令 hexo d 是发布到GitHub，连在一起的命令是 hexo g -d ，表示生成静态网页并发布到GitHub上。

③、修改一下hexo站点的配置文件，打开博客配置文件。

拉到最后面，添加几行语言，注意，英文冒号，且后面有一个空格，username要替换成你的GitHub用户名。

type: git

repo: git@github.com:username/username.github.io.git

branch: master

④、最后把URL换成你的GitHub网址，http://username.github.io

⑤、点击保存，Git控制台输入命令 hexo g 生成静态网页。

第四部分：更改Hexo主题，搭建个人独立站

一、下载主题

1、hexo默认的主题是“landscape”，比较简洁，功能也很强大，但是还有更多的主题可供大家选择。

hexo主题官网下载地址： https://hexo.io/themes/

2、比较常用的是NEXT主题，搜索框搜索 “next”，点击文字，向下拉，就可以看到下载方法。但是我个人比较喜欢的是另一个主题，名字是“matery”。每个主题有不同的安装方法，和需要安装的插件，最好选择那种更新日期比较近的，说明文档写的比较详细的。

3、进入主题说明页面，里面有下载方法介绍，可以按照这个方法下载，但是国内下载速度较慢，其实也可以直接解压复制文档，到刚才的文件夹里的theme文件夹。

二、修改配置文件

1、文件夹重命名为“matery”

2、修改博客配置文件，_config.yml，用Notepad++打开，“Ctrl+F”搜索“theme”，把下面的landscape改成，主题文件名，matery。

3、修改语言

修改原目录下面的配置文件，_config.yml，用Notepad++打开，“Ctrl+F”搜索“language”，这里默认是en，如果要改成中文的，输入“zh-CN”。

4、修改网站的基本信息

修改原目录下面的配置文件，_config.yml，用Notepad++打开，“Ctrl+F”搜索“site”，包括标题，描述，关键字，作者，按照自己的要求修改，一般“标题，描述，关键字”的设置都和网站之后的SEO优化相关。

5、安装主题需要的基础插件

这个要说明的一点是，不同的主题需要安装的插件不同，一般说明文档里都会告诉方法，按照说明一步一步进行就好，这个主题就比较简单，不需要安装任何插件。

6、生成页面，运行主题。

其实还有其他的东西需要修改，但是我们先运行一下主题，看一下是否安装成功。

在Git控制台输入命令，hexo g ，然后再输入命令 hexo s ，浏览器打开 http://localhost:4000/ ，就能看到我们安装好的主题了，“Ctrl+C”结束本地运行，输入命令 hexo d ，可上传到GitHub上，通过域名可直接访问。（注：这几个命令以后会经常用到，一般本地运行是hexo s，修改之后，最后要生成页面后再上传至GitHub，命令是 hexo g -d）

7、Matery主题修改

（1）、文件夹介绍

主题修改的部分很多，一般都在主题的文件夹内，简单介绍一下这几个文件夹都是干什么，因为我也不是专业的，一些东西不是很懂，只是能达到我想要的效果就可以了。

①、languages文件夹：是这个主题可以使用的语言，之前在博客配置文件更改的语言，就是和这里面的文件名称是对应的。

②、layout文件夹：顾名思义，和各种布局形式相关，之后更改的时候是要用到的。

③、source文件夹：这里面的文件夹是啥意思我也不太懂，主要用到的就是media文件夹，存放的是网站需要用到的图片。

④、_config.yml文件：是主题配置文件，更改主题的功能都在这里修改的。

其实我修改这个主题，主要用到的是layout文件夹和_config.yml文件。

（2）、部分主题修改，主要修改三个部分：菜单栏、页脚、社交媒体链接。

①、菜单栏：菜单栏现在有7个，我目前不需要这么多，只需要“主页、tags、about”，我需要把其他几个删除。

a、用Notepad++打开这个文件，navigation.ejs，把不想要的直接删除，然后保存。

b、用Notepad++打开主题配置文件 _config.yml，把菜单栏中不想要的前面加“#”，注释掉，点击保存，Git控制台输入命令“hexo s”，本地运行一下，打开 http://localhost:4000/，可以看到效果。

②、页脚部分

修改页脚部分的文件位置： /layout/_partial/footer.ejs，不想要的部分自己删除一下吧，我是觉得大部分都没啥用，我就都给删除了。

③、社交媒体部分

a、修改文件“social-link.ejs”，修改后点击保存。图标更改支持fontawesome，具体使用方法自己百度一下。

网址：https://fontawesome.com/

b、修改主题配置文件，_config.yml，用Notepad++打开，“Ctrl+F”搜索“social”，把不想要的部分直接用“#”注释掉。

④、其他功能

这个主题的功能还是很多的，都在主题配置文件/themes/matery/_config.yml里，大家可以一个一个仔细看看，例如打赏功能、播放音乐视频功能、在线聊天等。这里需要提到的是这个按钮，不知道大家是什么需求，反正我是不太需要这个，我直接false了，需要修改两处，一个是indexbtn，另一个是githubLink。

8、安装功能插件（都是在文件夹内的Git控制台进行的）

①、Search插件

a、安装插件，根目录下命令行输入

npm install hexo-generator-searchdb --save

b、编辑博客配置文件，新增以下内容到任意位置

#Search

search:

path: search.xml

field: post

format: html

limit: 10000

c、编辑主题配置文件，文件最下方添加如下代码

# Local search

local_search:

enable: true

②、RSS订阅插件

安装插件hexo-generator-feed插件

根目录下命令行输入 npm install hexo-generator-feed --save

安装插件，出现这个，表明安装成功。

③、网站地图插件

a、安装插件

分别安装google和百度插件

npm install hexo-generator-sitemap --save

npm install hexo-generator-baidu-sitemap --save

b、在博客目录的_config.yml中添加如下代码:

# 自动生成sitemap

sitemap:

path: sitemap.xml

baidusitemap:

path: baidusitemap.xml

④、Markdown编辑器

a、安装hexo-myadmin的插件

npm i hexo-myadmin --save

b、输入“hexo s”运行hexo，打开浏览器输入“http://localhost:4000/admin”，现在就可以正常使用, 打开hexo-admin界面。

c、这个是编辑文章用的，hexo支持Markdown编辑器，这个可以不用代码，直接写文章，改字体，插入图片链接等。

9、生成page和发布文章

①、生成tags页面

a、Git控制台输入命令“hexo new page "tags"”

b、编辑新页面文件，文件路径 /source/tags/index.md

---

title: tags

date: 2018-09-10 18:23:38

type: "tags"

layout: "tags"

---

②、生成about页面

a、Git控制台输入命令“hexo new page "about"”

b、编辑新页面文件，文件路径 /source/about/index.md

---

title: about

date: 2018-09-30 17:25:30

type: "about"

layout: "about"

---

③、生成404页面

文件路径 /source/404.md，该路径下，新建一个404.md页面，把以下代码复制粘贴过去。

---

title: 404

date: 2020-05-30 00:00:00

type: "404"

layout: "404"

description: "Cannot find the page you want :("

---

④、发布新文章

Git控制台输入“hexo s”，打开浏览器输入“http://localhost:4000/admin”，点击“new post”，文章编辑完了，直接点击“publish”发布即可。

PS：小工具推荐

• 图片压缩工具：有一些图片是需要压缩的，压缩后利于网页打开速度，推荐的免费压缩软件Caesium，一般图片的压缩率可达70%左右，回复“建站”，可下载。
• 伪原创生成工具：Article Spinner（简单同义词替换，推荐，免费的软件伪原创能力有限），回复“建站”，可下载。
• 语法检查工具： 免费在线语法检查修改工具，网址：https://app.grammarly.com/

10、 robots.txt 文件

作用： robots文件是搜索引擎爬虫爬行网站第一个访问的文件，通过robots协议告诉搜索引擎，我们网站的哪些内容可以访问，哪些内容不能访问。

生成工具：https://tool.chinaz.com/robots/

参考文章：https://blog.csdn.net/fanghua_vip/article/details/79535639

方法：在public文件夹中新建一个robots.txt 文件。

11、谷歌站长工具

到谷歌站长工具中注册账号，按照步骤一步一步的进行就可以了，有不同的验证方式，最后提交一下网站地图即可，可能会显示无法获取，不要担心，这个需要时间，一般一到两天就可以成功了。

站长工具地址：https://www.google.com/webmasters/tools/submit-url?hl=zh-CN




本文来源：网络整理

参考资料：

【不定期更新】最新从零开始Github Pages +Hexo 搭建个人静态博客

https://b23.tv/BV1Lt411R78H/p1

注：视频建议2倍速观看，本来他是有一个博客的，但是不知道为什么打不开了，博客地址：https://lixint.github.io/hexo-blog.html

推荐阅读

跨境电商小白也能拥有自己的独立站（服务器+宝塔+WordPress建站）

TikTok账号注册教程及基础运营教程

电脑端+手机端SSR软件下载及使用教程

打造学习型亚马逊运营团队，必备的4种思维习惯

亚马逊最好用的免费工具推荐——运营必备

亚马逊广告的优化技巧，怎么做亚马逊广告？

亚马逊广告优化技巧——如何利用数据透视表优化亚马逊广告？

亚马逊广告优化技巧——如何量化分析亚马逊广告效果？

亚马逊广告从来没有人告诉你的常识

亚马逊广告从来没有人告诉你的常识（二）

亚马逊广告怎么打？十招告别超高ACOS！

海外疫情爆发，亚马逊卖家选品策略