Hexo搭建个人网站零基础教学

基础知识速通

思考：我们访问一个网站的时候，电脑需要经过哪几步处理？

1. 我们用户输入像 https://anzai.sleepingbed.top/ 这样的“网址”
2. 电脑查询这个“网址”对应的“位置”
3. 从这个“位置”拿到我们想要的网页
4. 把网页给你看

如果想让你的电脑时时刻刻都知道这个位置的网站内容，这个位置需要一个24小时都开机的电脑，这样它就可以24小时把网页发给你的电脑，这台24小时开机的电脑叫做“服务器”，我们为了节约成本，可以选用Vercel、Netlify、GitHub Pages之类的服务来代替自己购买服务器，这里我们用Netlify做演示，因为剩下那俩实在太慢了。

https://anzai.sleepingbed.top/ 这样的“网址”我们可以通过购买“域名”来获得。

入门所需知识：

• Markdown语法
• HTML基础使用

以上两条会一丢丢即可，忘记了可以查。

域名购买

我用过阿里云万网和NameSilo购买域名，一般来说域名越长越便宜。.top域名便宜的只需要$1。

这里用万网举例，需要注意的是，如果你的服务器在大陆地区，你的网站需要备案。如果你的域名在大陆地区，你的域名需要实名认证。

阿里云万网点这里！

注册一个账号，在这里搜索想要的域名。

用sleepingbed举个例子。你看，这就出来了，买就好了。

需要注意的是，我域名前面的“anzai”是在解析的时候设置的“主机记录”，购买域名时一般来说不需要加，你只需要买如sleepingbed.top这个样子的即可。当然我只是拿sleepingbed.top举个例子，别真买这个，因为这个已经被我买了。

买完后先把实名信息传上去，先放着，我们进行下一步。

环境搭建

搭建环境我们需要下载以下软件。

• VSCode
• Node.js
• Git
• Terminal （仅限Windows）

我们还需要注册这些账号。

• GitHub
• Netlify

如果你认为上面这些链接进不去，那么可以使用这个工具。

• steamcommunity 302 （仅限Windows）

steamcommunity 302

从这里下载。

解压后以管理员身份运行那个红的。

设置里把这些典型的项目打勾，保存设置。最后启动服务即可。

VSCode

安装好后需要用插件设置语言为中文，其实英文也没啥问题。不赘述，Bing搜索有很多。

Node.js

这里推荐下载LTS版本。设置保持默认，一路Next到底。

Git

Git的安装有些复杂，两点比较重要，其他保持默认。

这里要把Windows Terminal那项打开，Windows Explorer integration可以关闭。

这里要选Visual Studio Code，记得不要选Insider！

其他环境

其他环境基本可以保持默认Next到底，这里暂时不多赘述。全部安装好后最好重启一下。

配置&搭建

首先我们先新建一个文件夹，用来存你的网页源码。注意，文件夹名字要用英文，尽量不要有特殊符号。

我就叫testsite了，你网站叫啥名字就可以叫什么。

在这个文件夹的空白位置右键，点“在终端中打开”，如果你没看到这个选项，那可能是你上一步的Terminal没有正确安装，然后这个选项也有可能是英文的。

看到类似这样的东西，那你就成功了，背景颜色不用在意，你的可能是黑色的。

先输入这两句，配置一下Git，最好和你的GitHub填入的信息保持一致。

1
2

git config --global user.name "你的名字"
git config --global user.email 你的邮箱

下面这句是忽略证书验证。

1

git config --global http.sslVerify false

这样Git初始设置完成。如果你在中国大陆地区，访问npm速度会很慢，可以通过配置cnpm解决，下面配置cnpm。

1

npm install -g cnpm --registry=https://registry.npmmirror.com

安装Hexo。

1

cnpm install hexo-cli -g

创建Hexo项目。

1

hexo init

安装所需模块。

1

cnpm install

创建Git仓库。

1

git init

文件夹里成这样了。简单解释一下里面的几个文件夹。

1
2
3
4
5
6
7
8

.  
├── _config.yml  // 网站默认设置
├── package.json  // 所用软件包，尽量别动
├── scaffolds  // 默认模板
├── source  // 源码
|   ├── _drafts  // 草稿
|   └── _posts  // 文章
└── themes  // 主题

那么我们打开_config.yml，里面是这样的，可以配置你的网站名字和作者之类的基本信息。哪里不懂可以直接查查这个词是什么意思。尽量不要改变文件结构，少一个空格有的时候也会造成错误，尽量只修改橙色的部分。

如果你无法通过双击的方式打开_config.yml，那么说明你VSCode设置可能有问题。如果你确认你安装了VSCode，你可以通过输入以下命令打开整个文件夹，然后再在左侧点击_config.yml。或者直接右键打开方式选“Visual Studio Code”

1

code .

寻找主题

Hexo主题 看到这些好看的主题了吗？点进去详细了解吧！页面里一般都会有使用教程，请优先按照官方文档中的使用教程使用，我这里只是举一个简单的例子。

以我的主题举例。点进去后作者会亲切的教你如何安装和设置。

那么我们在刚才打开的终端里输入

1

npm install hexo-theme-redefine@latest

或者

1

cnpm install hexo-theme-redefine@latest

然后再把_config.yml里的主题设置改掉，把默认的landscape改成你下载的主题名字。找不到这一行的可以使用搜索功能。

1

theme: redefine

这样主题就设置好了！

那么我们看看效果吧！

1

hexo server

看到https://localhost:4000/了吧，把这个放在浏览器地址栏回车看看吧！

1
2
3

INFO  Validating config
INFO  Start processing
INFO  Hexo is running at https://localhost:4000/ . Press Ctrl+C to stop.

耶！

hexo server，它的作用是把你现有的文件在本地开一个服务器，debug用的。

主题设置！这里有点麻烦。

进入node_modules文件夹，找到你的主题目录，一般来说名字是叫hexo-theme-主题名之类的，点进去，里面有个_config.yml，把这个文件复制一份，重命名为_config.主题名.yml，然后剪切到你的刚才的文件夹下。

举个例子就是，如果你用的是redefine主题，那么你进入node_modules文件夹，进入hexo-theme-redefine文件夹，然后把_config.yml复制一份，重命名为_config.redefine.yml，剪切到testsite文件夹。

然后你打开这个文件，就能看到主题的自定义配置了，一般来说主题还会有官方文档，具体用法请参见你的主题的官方文档。

创建新文章。

1

hexo new "文章标题"

这会让你的source/_posts/里面多出一个文章标题.md文件，打开它就可以看到这些。title是你的文章标题，可以改，下面的日期和标签不用多解释吧。想要多个标签可以用 [标签1, 标签2, 标签3]，记住，冒号后面有个空格，不要丢掉。

1
2
3
4
5
6
7
8
9

---

title: test

date: 2023-08-22 10:59:13

tags:

---

之后你就可以用Markdown语法写文章了！

学习Markdown可以去菜鸟教程

部署

先去GitHub创建一个新仓库。最好是私有库，private。不需要README，加上了反而麻烦，也不需要gitignore，hexo给你生成好了。

创建完之后会给你一些指令，把给你的指令魔改一下。像这样，再执行commit和之后的代码。

1

git add .

如果需要详细教学请按照教程 把你的网页源码传上GitHub。

你大概能看到你类似这样的东西。那么你就成功了！

接着登录Netlify，new site一个。选import an existing project。

我的Netlify因为使用过，所以可能会和新注册的有所不同，不过应该都大差不差，可以寻找Create from Git之类的。

这里选Deploy with GitHub，会跳出窗口让你验证，给它权限就可以了。

选你刚才在GitHub上弄的库。

下一步，这里这样填

最后点部署，等它一堆命令过去，就部署完成啦！

解析网站

这里的domain settings可以自定义域名。

在这里添加你的域名，比如说我的anzai.sleepingbed.top，把它填到这，然后回到阿里云，找到你的域名点解析，记录类型选CNAME。主机记录就是我这个网址里的anzai，比如说你写www，那么就是www.你的域名.com之类的。然后值就写我下图红框的文字。添加就好了。

等个几分钟，估计你就可以通过你的域名访问了。

更新网站

主条目：Git使用手册

我们需要把代码推到我们的仓库让它自动更新。

1
2
3

git add .
git commit -m "更新信息"
git push

这样应该就好了。

网站加速

如果你觉得网站很慢，可以使用CDN服务，CDN是内容分发网络，我们现在主要用它加速网站。我购买了我主题作者的CDN服务，这样可以将网站的静态资源（如图片）加速加载。

如果觉得太复杂，那么可以使用图床来托管图片。

图片链接直接改为加速后的链接即可。（这里需要有Markdown基础哦）

结尾

最近问的人实在是太多了，如果你觉得哪里有错误或者哪里需要加点什么，欢迎评论或者私信。