Hexo博客搭建与部署

以你之姓@ 2022-10-31 00:38 238阅读 0赞

## Hexo简介 ##

Hexo是一款基于Node.js的静态博客框架，使用Markdown（或其他渲染引擎）解析文章，依赖少易于安装，可在几秒内利用现有主题生成静态网页。框架提供了很详细的中文文档，大家可以进入[Hexo官网][Hexo]查看。

![27588d3c22a8264c971eb40a18c4a8cb.png][]

## 搭建环境准备 ##

### 安装Git ###

Git是一个先进的分布式版本控制工具，可以有效处理不同规模的项目版本管理。这里用于管理你的Hexo文章，将本地的博客上传至Github。到Git官网选择合适的版本[下载][Link 1]，安装后会有一个Git Bash的命令行工具，之后用该工具操作Git。

![6db14f50ce38b36bb351220b6d076b26.png][]

检查是否安装成功：

git --version

正常显示版本号，无报错即为安装成功。

另外，Windows环境下在Git安装完成后，可以使用Git Bash来进行后续命令行操作。

### 安装Node.js ###

Hexo基于Node.js，所以需要安装Node.js及npm工具。可进入Node.js中文网[下载][Link 2]，选择LTS（长期支持版本）即可。

![5bc1207db9664261f3abc72c40b79fb1.png][]

检查是否安装成功：

node -v
    npm -v

正常显示版本号，无报错即为安装成功。

## 博客本地搭建 ##

### 安装Hexo ###

右键打开Git Bash，输入命令：

npm install -g hexo-cli

检查是否安装成功：

hexo -v

### 初始化博客 ###

在电脑上新建一个文件夹作为博客的目录，例如这里我将博客目录设置为myblog，执行以下命令：

hexo init myblog
    cd myblog
    npm install

### 博客目录介绍 ###

新建完成后，指定文件夹的目录如下：

.
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes
    _config.yml

网站的配置信息，可以在此配置大部分的参数。

package.json

应用程序的信息，新添加的插件内容也会显示在这里，可以不做修改。

scaffolds

模板文件夹，新建文章时，Hexo会根据scaffolds来建立文件。

Hexo的模板是指在新建的Markdown文件中默认填充的内容，我们可以在模板上添加自定义内容，比如categories，tags等。

source

source文件夹是存放用户资源的地方，也就是我们的博客内容。初始设置两个文件夹，posts（文章）和drafts（草稿）。之后通过命令新建页面后，文件夹数量会增加。

themes

主题文件夹，用于存放主题文件包，Hexo会根据主题内容生成静态页面，默认主题为landscape，可根据个人喜好进行更改。

### 博客本地效果 ###

Git Bash执行以下命令：

hexo -g
    hexo server

启动hexo服务，访问[http://localhost:4000][http_localhost_4000]即可看到生成的博客页面。使用Ctrl+C可关闭本地服务。

![c2db7c452514b1cb406916eaa334ab79.png][]

## 博客Github部署 ##

### 创建个人仓库 ###

这里需要Github账号，如果没有可以去[注册][Link 3]一个。

![507d433d1131e28e28971954b45072e9.png][]

[登录][Link 4]Github，新建一个仓库，命名格式为：用户名.github.io。比如，我的用户名是muzihuaner，我的仓库名为muzihuaner.github.io\`。注意这里必须按此格式命名，只有这样，之后部署到GitHub pages的时候，才会被识别。

![df387d05b7f61d8ba2cac9e82e1b47db.png][]

### 配置SSH ###

打开Git Bash，输入以下命令，生成本地密钥。这里用户名和邮箱仅作演示，用户名为你Github的用户名，邮箱为你Github的邮箱。

git config --global user.name "muzihuaner"
    git config --global user.email "xxxxxx@qq.com"

输入以下命令，检查输入是否正确：

git config user.name
    git config user.email

确认无误后，输入以下命令，创建SSH：

ssh-keygen -t rsa -C "youremail"

无脑下一步即可

此时在用户文件夹下，已经生成了.ssh文件夹，在本地找到这个文件夹。

![3143bfab5d47b246bb71a391438bdc47.png][]

`id_rsa`是你这台电脑的私人秘钥，`id_rsa.pub`是公共秘钥。把公钥放在GitHub上，当你连接自己的Github账号时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过Git上传你的文件到GitHub上。

在Github的设置中，找到`SSH and GPG keys`，新建SSH Key，以文本方式打开`id_rsa.pub`文件，将内容复制到Key，标题随便起，添加Key。

![3883fe5c2649ab76d389d976fe4cebf0.png][]

### 部署代码到Github ###

打开站点配置文件`_config.yml`，拉到最底部，找到deploy字段，按如下格式修改其内容：

deploy:
      type: git
      repository: git@github.com:muzihuaner/muzihuaner.github.io.git
      branch: main

其中repo字段可在Github获取：

![image-20210219195740908][]

回到Git Bash，安装deploy-git ，用于使用命令部署到Github。

npm install hexo-deployer-git --save

然后执行：

hexo clean	//可省略
    hexo generate
    hexo deploy

出现下图所示说明部署成功，此时代码已同步至Github。

![image-20210219201138121][]

![image-20210219201209648][]

打开网址[http://yourname.github.io][http_yourname.github.io]就可以看到Hexo博客了。

## 常用命令 ##

Hexo文档中命令很多，但你并不需要记住每一个。在博客的使用过程中，主要的命令如下：

`init`用于新建网站

hexo init <folder>

`new`用于新建文章或页面

hexo new [layout] <title>

`generate`用于生成静态页面

hexo generate
    hexo g	//简写

`deploy`用于将内容部署到网站

hexo deploy
    hexo -g

`publish`用于将内容从drafts文件夹移动到posts文件夹

hexo publish [layout] <title>

`server`用于启动服务器进行预览，默认情况下，访问入口为http://localhost:4000/

hexo server
    hexo s	//简写

> 实际上，除了第一次部署时，需要用到hexo init这个命令，平时写博客的过程中，最常用的就是：
> 
> hexo n 新建文章/页面
> 
> hexo g 生成静态页面
> 
> hexo s 本地查看内容
> 
> hexo d 部署到Github
> 
> 如果需要清除之前生成的内容，可以在生成静态页面前执行hexo clean，其他情况只需要以上四条命令即可。

之后你就可以使用各种各样的主题啦！详细使用主题的教程，看主题的文档就可以了哦！

## 设置个人域名 ##

现在你的个人网站的地址是 `yourname.github.io`，如果觉得这个网址逼格不太够，这就需要你设置个人域名了。但是需要花钱。推荐在[良心云][Link 5]上买域名

因为Github的Page服务处于半墙状态，所以我们这里使用Vercel代理

打开[Vercel][]，使用Github账号登录

![img][]

![img][img 1]

### 新建Project ###

![img][img 2]

![img][img 3]

填写对应的github仓库https地址，单击`Continue`

![img][img 4]

此处直接点击`Continue`

![img][img 5]

此处可以填写下PROJECT NAME，也可默认，毕竟后面要添加域名。然后点击`Deploy`，这个Project就建好了

### 添加域名解析记录 ###

在域名控制台添加域名解析记录，如下方所示。

### 添加对应的域名 ###

回到Vercel,点击之前创建的Project的`settings`打开设置，选择`Domains`

![7fbd96e7cefd1d49c3de84a751474a1d.png][]

添加对应的域名即可。

除此之外你还可以使用[Coding][]来部署博客（教程自行百度）

好了，基本的安装方法到此结束，尽情折腾吧！

[Hexo]: https://hexo.io/zh-cn/
[27588d3c22a8264c971eb40a18c4a8cb.png]: /images/20221024/967f1c930c6248168b303b2119698265.png
[Link 1]: https://gitforwindows.org/
[6db14f50ce38b36bb351220b6d076b26.png]: /images/20221024/13738c72507d4de39bd53221a13892b4.png
[Link 2]: http://nodejs.cn/download/
[5bc1207db9664261f3abc72c40b79fb1.png]: /images/20221024/6be405187cbb46339b9c1ac39e2cf38d.png
[http_localhost_4000]: http://localhost:4000/
[c2db7c452514b1cb406916eaa334ab79.png]: /images/20221024/b96c5c4ac53242989c0a98c01b74ec0b.png
[Link 3]: https://github.com/join
[507d433d1131e28e28971954b45072e9.png]: /images/20221024/9c22d9dd18bc404e9a73586782bec948.png
[Link 4]: https://github.com/login
[df387d05b7f61d8ba2cac9e82e1b47db.png]: /images/20221024/b5216060ba64409e98b890641782cf37.png
[3143bfab5d47b246bb71a391438bdc47.png]: /images/20221024/e7eef26cfa544513b05d87f87cea6601.png
[3883fe5c2649ab76d389d976fe4cebf0.png]: /images/20221024/2dd75f607be24514bd848d5c42ea632b.png
[image-20210219195740908]: /images/20221024/7d8d51a675b74a76b729320902c0e03e.png
[image-20210219201138121]: /images/20221024/966accfd19db4a85905c45ef5a566f62.png
[image-20210219201209648]: /images/20221024/2994aa74399d48d585b98fb7578790ce.png
[http_yourname.github.io]: http://yourname.github.io/
[Link 5]: https://cloud.tencent.com/
[Vercel]: https://vercel.com/
[img]: /images/20221024/d0e7c8a825c64ac59284a558d2eb4671.png
[img 1]: /images/20221024/87317f257bf942789e1900ba398993b1.png
[img 2]: /images/20221024/36178670d4904593b5dca5a1b89a0cae.png
[img 3]: /images/20221024/7f127abb8188422a98a26e41d0051459.png
[img 4]: /images/20221024/c05a72590937419281dec255feb93ec0.png
[img 5]: /images/20221024/8e1fdf4ac14b4fdc922693b0466b9040.png
[7fbd96e7cefd1d49c3de84a751474a1d.png]: /images/20221024/0f7572ce3b45484ab66135f421f79499.png
[Coding]: https://coding.net/