Hexo - 博客搭建基础教程

一时失言乱红尘 2023-07-09 02:04 6阅读 0赞

## 概述 ##

> 建立个人博客的需求由来已久，能拥有自己的技术博客是广大程序员的梦想。相比于早些时候的WordPress、织梦等框架，就个人站点来说，用Hexo搭建博客可以用“怎一个爽字了得”形容。Hexo基于Node.js开发，具有轻量、方便、易部署等特点，主题丰富简约，依赖github即可构建站点，近些年受到广泛关注。此篇文章旨在和与我一样的初学者分享经验，有疑问欢迎在评论区交流。

## 准备工作 ##

*  `github账号`：需要申请一个属于你的github账号，可以在[这里申请][Link 1]。
 *  `git bash`： 需要有git bash运行环境，相关安装和使用教程请询问度娘。
 *  `Node.js`： 必须安装 Node.js 开发环境，建议参考[Hexo 环境搭建][Hexo]。
 *  `个人域名`(可选)：申请自己的域名可以有自己专用的地址解析链接，我使用[百度智能云][Link 2]申请的域名，用着还不错，也比较便宜。
 *  `markdown`：Hexo使用Markdown解析文章，不熟悉的同学可以移步[Markdown 简明教程][Markdown]。
 *  `html\css\js基础`： 有最好，没有也没关系。

## Hexo的安装、初始化、本地预览 ##

### 安装Hexo ###

> 在git bash环境下输入命令：

npm install -g hexo-cli

### 初始化Hexo ###

> 在选好的文件夹下运行命令，我们以 TestHexo 为例设立我们的第一个Hexo 站点。

hexo init TestHexo

![安装][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA_size_16_color_FFFFFF_t_70]

cd TestHexo
    npm install

> 完成后在TestHexo 文件夹中会有如下内容：  
> ![初始化Hexo文件][Hexo 1]

如果你坚持到了这里，那么恭喜你：

此时本地的Hexo站点已经完成了（什么不是刚开始么？？ 是的已经结束了）。

### 本地预览 ###

> 为了查看本地站点实际效果，输入命令：

hexo server

或

hexo s

> 会在本地搭建服务器挂载生成的本地站点，通过访问 http://localhost:4000 浏览自己的网站。  
> ![预览页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA_size_16_color_FFFFFF_t_70 1]

## Hexo 部署到Github ##

### 在Github端创建仓库 ###

仓库名：<Github 账号>.github.io

### 安装Hexo-git 插件 ###

执行命令：

npm install hexo-deployer-git --save

### 链接本地与远程仓库 ###

> 需要在本地建立SSh key，并添加到远程的github配置中。可参考[Git 连接 Github 远程仓库][Git _ Github]

### 修改`站点配置文件` ###

> 站点配置文件为Hexo根目录下的 \_config.yml文件，编辑该文件，找到相关部分并修改。

# Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: git@github.com:<Github账号>/<Github账号>.github.io.git  #该地址写ssh地址，不写http地址。
      branch: master

### 推送到Github ###

> 依次输入命令：

hexo g
    hexo d

> 当见到返回：

INFO  Deploy done: git

> 即为推送成功。
> 
> 至此，您的Hexo博客已经搭建在GithubPages, 域名为`https://<Github账号>.github.io`。

## 自定义域名 ##

> 在站点部署在Github基础上，您也可以将自己购买的域名解析到刚刚建立的地址。

### 域名解析 ###

> 在域名设置界面:

*  类型选择为 CNAME；
 *  主机记录即域名前缀，填写为www；
 *  记录值填写为<Github账号名称>.github.io；
 *  解析线路，TTL 默认即可。  
    ![域名配置][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA_size_16_color_FFFFFF_t_70 2]

> 提示：域名需要按照国家要求备案  
> ![域名备案][20200227094336349.png]

### 仓库设置 ###

> 进入github建立的hexo仓库，点击settings按钮设置仓库，在Custom domin中填入自己的域名，并Save：  
> ![仓库设置][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA_size_16_color_FFFFFF_t_70 3]

### 本地设置 ###

> 在Hexo站点目录source文件夹中，创建名为`CNAME`的文件，并向其写入`自定义域名`

echo www.zywvvd.com >> CNAME    #域名部分请替换为你自己的

![CNAME文件][CNAME]

> 几分钟之后，即可通过该域名访问Hexo站点。 [又见苍岚][Link 3]

## 更换主题 ##

> hexo主题有很多,默认主题为landscape。
> 
> 更换主题需要下载主题包放在Hexo目录中themes文件夹内，如我下载了Next主题，文件夹如图所示。  
> ![Themes文件夹][Themes]

> 并将`站点配置文件`中主题换成相应的主题名：  
> ![主题配置][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA_size_16_color_FFFFFF_t_70 4]

> 主题可以在[github][]现有的工作中挑选。

## 更多教程 ##

> 欢迎访问[又见苍岚][Link 3]。

[Link 1]: https://github.com
[Hexo]: https://www.simon96.online/2018/11/10/hexo-env/
[Link 2]: https://cloud.baidu.com/product/bcd/price.html
[Markdown]: https://www.zywvvd.com/2020/02/18/Markdown-%E7%AE%80%E6%98%8E%E6%95%99%E7%A8%8B/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200227094130807.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA==,size_16,color_FFFFFF,t_70
[Hexo 1]: https://img-blog.csdnimg.cn/20200227094224747.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/202002270942424.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA==,size_16,color_FFFFFF,t_70
[Git _ Github]: https://www.zywvvd.com/zywvvd.github.io/2020/02/23/Git-%E8%BF%9E%E6%8E%A5-Github-%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200227094314432.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA==,size_16,color_FFFFFF,t_70
[20200227094336349.png]: https://img-blog.csdnimg.cn/20200227094336349.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200227094403385.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA==,size_16,color_FFFFFF,t_70
[CNAME]: https://img-blog.csdnimg.cn/20200227094420656.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA==,size_16,color_FFFFFF,t_70
[Link 3]: https://www.zywvvd.com
[Themes]: https://img-blog.csdnimg.cn/20200227094452663.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020022709452899.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5d3Z2ZA==,size_16,color_FFFFFF,t_70
[github]: https://github.com/search?q=hexo-theme