【最新版】30分钟教你搭建属于自己的个人博客
简介：
- 本教程是以Hexo和Coding pages 为基础，搭建个人的静态博客网站
- Hexo Hexo官网 快速、简洁且高效的博客框架
- Coding CODING – 一站式软件研发管理平台 代码持续集成，持续部署
准备:
古人云： 工欲善其事必先利其器
我们在开始搭建之前，要准备好本地的环境。
- 一个好的文本编辑器，如：Vscode，Notepad3…等等’
- Node v14.X版本
- git
开始:
1.配置coding仓库
注册完coding账号后，来到项目页，点击创建项目。
然后我们选择项目模板为代码托管和自动化部署。
然后我们要填写一些项目的配置信息。
接下来，我们选择创建代码仓库。
完成创建后，我们会得到一个链接，如下图：
这样子我们的代码仓库就创建完成了，这个代码仓库有什么用处呢。
- 为后面在Coding部署我们的静态博客作前提准备
- 存储我们hexo的静态文件
2.配置Hexo
接下来就轮到我们的Hexo博客框架登场了。
来到Hexo的官网，首页是这样子的。
可以看到Hexo依赖Nodejs来生成静态页面，而且文章是支持Md格式的，更重要的是他能够在我们添加修改文章后，一键部署到我们的代码仓库中，实现修改，并且hexo有许多优秀的插件。
第一步，在本地克隆我们之前新建的代码仓库。在你存放代码文件的盘上，新建一个文件夹。然后右键打开git bash。
输入命令并运行：
git clone 你的仓库地址
这里的仓库地址指的是你创建好仓库后，系统给你的链接。
克隆好后，我们的文件夹结构是这样子的。
然后我们在上方的文件夹路径中直接输入cmd，打开cmd，注意：这里打开的cmd是管理员，如果不是管理员可能会出错。
输入命令：
npm install hexo-cli -g
然后输入命令:
hexo init 你博客的名字
成功后，你的文件夹会多出一个文件夹，里面存放的则是Hexo的源文件。
接下来，我们则要安装Hexo的相关依赖，在cmd中输入命令
cd 文件夹名称 这里的文件夹名称就是新出现的文件夹
npm install
这样子就成功了。
然后还需输入命令，来安装hexo的git插件
npm install --save hexo-deployer-git
如果没有安装该插件我们则不能push文件到coding上。
具体Hexo文件夹各个文件的作用，详细见：建站 | Hexo
接下来，我们来新建一篇文章，打开根目录下的source文件夹，再进入_posts文件，可以看到系统已经为我们初始化好了，一篇文章hello-world.md .
我们新建一个md文件，然后在开始部分，输入我们这篇文章的信息
源代码:
## 这是我的博客第一篇文章
这是我的博客第一篇文章，请大家多多支持我！
可以看到文章上方有一些配置信息，title,date，这些是信息用来指定个别文件的变量，也就是指定文章的信息。
具体还有其他配置，详细见: Front-matter | Hexo
接下来，我们需要配置Hexo中一键部署的功能，打开hexo根目录中的config.yml
在最下面的deploy中，按照图中的格式来修改：
注意：这里的repo的链接是你仓库的链接，也即coding仓库的git地址。
最后的最后，把我们Hexo根目录中所有的文件，剪切到上一个文件夹中，也就是目录含有隐藏文件夹 .git
然后我们在此文件夹打开cmd，输入命令：
hexo g -d
这个命令是两个命令合在一起，分别是 hexo generate和 hexo deploy
最后我们的仓库是这样子的。
至此，我们的Hexo的基础配置也结束了。
3.在coding部署博客
首先，在代码仓库页，点击仓库设置。
在访问设置中，把公开源代码勾上。
然后我们点击左边的网站托管
这里我们需要扫码授权腾讯云。
进行实名认证后，点击新建网站，按照图中配置。
网站类型选择：静态网站，节点的话，如果你后面有自定义域名的需要，那么如果节点是在国内的话，那么域名就必须要进行备案，如果节点为香港，那么域名如果是在外国服务商购买的话，就不需要备案，国内服务商购买的话仍需要进行备案。 这里我们选择广州节点。
然后，点击确认，网站就会进行部署。
然后等待部署成功。
点击访问后，就可以看到我们的博客了。
同时也能够看到我们之前新建的文章。
4.修改文章或配置后如何重新部署上线
假如我们现在需要对文章进行修改，或者安装新的插件，那么我们在做完一系列操作后，只需要再次执行部署命令 Hexo g -d即可重新部署上线。
5.怎么自定义主题
配置 | Hexo 在官网的文档里，我们可以知道Hexo的config.yml里每个配置项的作用，这里我推荐几个主题，分别是Butterfly 安裝文檔(一) | Butterfly和 NexT，Next的中文文档地址：开始使用 – NexT 使用文档，我自己本人用的是Butterfly主题。
6.怎么绑定自己的域名
我们首先要在域名服务商购买了域名，而且成功备案后才能够绑定自己的域名，如果你选择的是香港节点，那么可以去国外的域名服务商购买域名，则不需要备案。
我们先点进部署项目
点击自定义域名，然后按照步骤进行绑定。
须知：
绑定自定义域名后，请将域名 DNS 中的 CNAME 记录设置为表格中的地址；自定义域名生效后每次进行部署需要刷新CDN缓存，耗时约 5 分钟。查看帮助文档
申请 SSL 证书需要一定的时间，申请通过后会有短信通知；如果申请失败，可以重新申请；点击证书状态可以查看申请进度。申请通过后请重新部署一次网站。
节点在大陆境内的网站使用自定义域名时需要备案，备案成功后可能会有短暂延迟，延迟最长两天。未备案和备案延迟期内，网站部署可能失败。
7.如何更便捷的编写和修改文章
我们可以使用vscode编辑器，安装以下两个插件。
然后侧边栏就会有一个新增的选项，我们可以在这里快捷地新建文章，而且我们新建文章会初始化基础的文章配置，时间，主题，分类，标签等等。
最后我们快捷键 ctrl+shift+p可以快捷地执行 hexo g -d命令，快速进行部署上线。
8.Hexo的跨设备同步
在我们日常使用中很有可能，要在多台设备上进行写作，那么我们该怎么保持配置文件的一致呢。
我们在hexo根目录下新建一个 .gitignore文件，里面填入如下配置
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
然后打开git bash输入命令
git branch 分支名 /* 新建分支，分支名任意 */
git checkout 分支名 /* 切换到分支 */
git add .
git commit -m "Hexo的源文件"
git push origin 分支名 /* 这里的分支名对应新建的分支名 */
然后我们就可以在代码仓库中看见新的分支，新的分支里正是我们的Hexo源文件。
以后我们在某一台设备上新建修改了文章或者安装了新的插件后，我们就执行如下命令即可.
git add .
git commit -m "信息"
git push origin 存放源文件的分支名
即可把文件同步上去。
我们还可以把默认分支改为Hexo源文件分支，把静态文件master分支隐藏掉。
这样子我们只要在新的设备上克隆仓库，执行 npm install后即可完成同步。
结尾：
最后看一下，butterfly主题美化后的博客效果。
Original: https://www.cnblogs.com/Alickx/p/HexoBlog.html
Author: Alickx
Title: 【最新版】30分钟教你搭建属于自己的个人博客
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/589288/
转载文章受原作者版权保护。转载请注明原作者出处！