（二）Hexo+码云+git快速搭建免费的静态Blog（转载）

悠悠 2023-02-22 03:50 27阅读 0赞

作为一个对技术有着热情渴望的前端小白，对于写Blog这种事也是跃跃欲试。于是乎赶紧从网上搜罗了一堆搭建个人Blog的方法，对比了下，最后倾心于Hexo这个博客框架，搭配Github/码云的page服务，可以轻松搭建一个炫酷又不失优雅的静态Blog（还是完全免费的）

**前期准备工作**

*  去Git官网，下载安装Git（版本控制系统）
 *  去Node.js官网，下载安装Node.js（自带NPM包管理工具，另外Hexo是基于Node.js的）
 *  注册一个码云或Github账号（提供page服务）
 *  有一个经常阅读官方文档的好习惯（一些简单的安装自行去看官方教程，这里不会啰嗦）

**为什么选择Hexo+码云**

*  Hexo主打快速、简洁和高效，安装过程简单，关键是它的模板主题非常华丽亮眼（这或许也是Hexo吸引了众多妹子程序媛的原因）

我们可以看看Hexo官方对自家的定义：  
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

*  至于码云 vs Github方面，码云作为国内网站，访问速度自然是比Github快一些，且更容易被SEO收录提升博客的曝光率。

**第一步：Hexo安装与测试**

1.请先安装好Git和Node.js

2.安装Hexo：使用cmd命令行，输入下列命令

$ npm install -g hexo-cli

3.指定一个文件夹存放你的Blog文件（也就是根目录）

$ hexo init <folder>  \# <folder>替换成你的文件夹地址，在这个地址里生成Hexo初始化文件

$ cd <folder>  \# 进入这个文件夹

$ npm install  \# 在文件夹内自动安装Hexo所依赖的各种模块

经过以上3步，Hexo就初始化成功了，下面我们进行一下本地测试

4.生成静态页面

$ hexo generate

5.本地测试：开启服务器

Hexo 3.0 把服务器独立成了个别模块，所以我们必须先安装 hexo-server 才能使用server

$ npm install hexo-server --save

安装成功后，以后我们只需要使用下面的命令就可以开启服务器了，开启后默认的网站访问地址为：http://localhost:4000

$ hexo server

简单的5步，一个最原始的本地Hexo博客就已经搭建好了。浏览器输入http://localhost:4000就可以看到类似如下效果。

[![https://tanghuan0827.gitee.io/2020/06/07/blog003/001.jpg][https_tanghuan0827.gitee.io_2020_06_07_blog003_001.jpg]][https_tanghuan0827.gitee.io_2020_06_07_blog003_001.jpg_https_tanghuan0827.gitee.io_2020_06_07_blog003_001.jpg]

**第二步：Hexo部署前的准备工作**

在localhost:4000新鲜够了没？接下来就是真刀真枪的干了，我们这里使用码云进行Blog的部署(Github也是类似的方法)。

1.登录码云，新建一个项目。

如果想以http://xuek.gitee.io这种一级域名的形式访问bolg，那么我们需要建立一个与自己个性地址同名的项目，如 https://gitee.com/xuek 这个用户，在创建项目时**项目名称**应该为xuek。

2.在克隆/下载中，复制HTTPS里的链接。

[![https://tanghuan0827.gitee.io/2020/06/07/blog003/002.jpg][https_tanghuan0827.gitee.io_2020_06_07_blog003_002.jpg]][https_tanghuan0827.gitee.io_2020_06_07_blog003_002.jpg_https_tanghuan0827.gitee.io_2020_06_07_blog003_002.jpg]

3.找到Blog本地的根目录里的\_config.yml文件，找到deploy这一项，将之前复制的HTTPS里的链接复制到repo后面，然后修改type的值为git，然后保存即可。

[![https://tanghuan0827.gitee.io/2020/06/07/blog003/003.jpg][https_tanghuan0827.gitee.io_2020_06_07_blog003_003.jpg]][https_tanghuan0827.gitee.io_2020_06_07_blog003_003.jpg_https_tanghuan0827.gitee.io_2020_06_07_blog003_003.jpg]

经过以上3步，我们就将码云和本地的Blog建立了连接，那么我们该怎么将Blog部署到码云上呢？别急，接下来就到git登场了。

**第三步：使用git对Blog进行版本控制**

1.在Blog根目录单击右键，选择Git Bash here

git bash就是模拟出来的小型Linux命令行

2.如果是第一次使用git的话，要先配置一下我们git的基本信息

$ git config --global user.name+空格\+你的名字(最好和码云的一样)

$ git config --global user.email+空格\+你的邮箱(最好和码云的一样)

3.接下来我们就可以在Git Bash中初始化git，把Blog根目录变成一个git可以管理的仓库

$ git init

这样就可以使用git管理你的Blog版本了，更多关于git的使用参见: [廖雪峰的git教程][git]

**第四步：部署Hexo到码云**

万事俱备，只欠东风。你有没有发现githexo码云这三者已经关联起来了？好了，下面我们将用git把Hexo部署在码云上

1.在Blog根目录下安装Hexo的Git部署插件

$ npm install hexo-deployer-git --save

2.安装好了Git部署插件之后，我们就可以输入命令一键部署了

$ hexo deploy

之后会弹出一个对话框，让我们输入码云的帐号和密码（稍后我们会配置网站的SSH，这样就不用每次都输入账号密码了）

**第五步：使用码云的page服务**

1.进入我们码云的项目里，会发现Blog的静态文件已经上传到项目中了

2.选择服务—>Gitee Pages，我们使用master分支，然后直接点“启动”，即可启动page服务。  
更多关于码云page的说明可参考官网：[码云Gitee帮助文档][Gitee]

[![https://tanghuan0827.gitee.io/2020/06/07/blog003/004.jpg][https_tanghuan0827.gitee.io_2020_06_07_blog003_004.jpg]][https_tanghuan0827.gitee.io_2020_06_07_blog003_004.jpg_https_tanghuan0827.gitee.io_2020_06_07_blog003_004.jpg]

大功告成！点击网站地址就可以进入属于你自己的Blog了！

不过我们可没有结束，一切才刚刚开始..

**第六步：配置SSH**

有了免费的服务器(page)之后，我们还可以把它和我们个人电脑作一个绑定，以后使用git通讯就不用总是输入账号密码，自然方便多了！

[![https://tanghuan0827.gitee.io/2020/06/07/blog003/005.jpg][https_tanghuan0827.gitee.io_2020_06_07_blog003_005.jpg]][https_tanghuan0827.gitee.io_2020_06_07_blog003_005.jpg_https_tanghuan0827.gitee.io_2020_06_07_blog003_005.jpg]

这里不啰嗦了，最完美的配置SSH教程参见官网：[生成并部署SSH key][SSH key]

**第七步：安装主题**

Hexo使用者乐此不疲的地方就在于它各种炫酷的主题了，不过Hexo官网那点主题不够看，更多的还是移步这里：[有哪些好看的 Hexo 主题？][Hexo]

Hexo的主题基本是傻瓜式安装，只需要将主题文件复制到Blog根目录的themes文件夹下， 然后修改下\_config.yml站点配置文件即可：

[![https://tanghuan0827.gitee.io/2020/06/07/blog003/006.jpg][https_tanghuan0827.gitee.io_2020_06_07_blog003_006.jpg]][https_tanghuan0827.gitee.io_2020_06_07_blog003_006.jpg_https_tanghuan0827.gitee.io_2020_06_07_blog003_006.jpg]

这里我们使用了Next主题，具体的安装和使用方法参见官网：[NexT使用文档][NexT]

**第八步：新建文章**

1.使用下面的命令生成一篇新文章

$ hexo new "title"

2.生成的新文章都在\\source\\\_posts\\title.md目录下，打开后注意理解下顶部的模板参数，其他自行编辑即可。

title: Hello World  // 文章标题

date: 2018-07-11 23:49:28  // 文章生成时间，一般默认即可

categories: text   // 文章分类目录，可使用\[a,b,c\]表示多个分类

tags: \[Hexo,text\]   // 文章标签

\---

// 正文部分，使用markdown进行书写。

// 如果设置了阅读全文选项，则more标签以下的内容在首页会被“阅读全文”字样隐藏

3.文章修改后可依照前面的方法先在本地 http://localhost:4000 进行预览（每次需要重新启动下sever），至于正式更新到网站上还需要看下一步。

**第九步： 更新Blog**

1.清除缓存文件 (db.json) 和已生成的静态文件 (public)

$ hexo clean

2.重新生成静态文件并自动部署到网站

$ hexo generate --deploy \# 可以简写为hexo g -d

**总结**

以上就是基于Hexo搭建Blog的一些基础性内容。这个教程也只是把思路理顺了一下，权当是一个分享，文章若有错误之处还请多多指点。

一个Blog的搭建过程看似简单，但其中用到的知识却非常广泛，也需要花费些时间仔细阅读下各个官方文档，不仅要知道怎么用，还要知道为何这么用，这也是我们下一步要继续研究的。

万里长征才走了第一步，接下来就是有趣但也是非常具有挑战性的事————个性化我们的Blog。关于Blog主题的美化和个性化，就是一个浩大的工程了，网上关于Next主题优化的进阶教程非常多，有兴趣的可以尝试下，这里就暂时不做讨论了，日后有需要再另作一文。

**转载地址：https://segmentfault.com/a/1190000016083265**

[https_tanghuan0827.gitee.io_2020_06_07_blog003_001.jpg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90YW5naHVhbjA4MjcuZ2l0ZWUuaW8vMjAyMC8wNi8wNy9ibG9nMDAzLzAwMS5qcGc?x-oss-process=image/format,png
[https_tanghuan0827.gitee.io_2020_06_07_blog003_001.jpg_https_tanghuan0827.gitee.io_2020_06_07_blog003_001.jpg]: https://tanghuan0827.gitee.io/2020/06/07/blog003/001.jpg
[https_tanghuan0827.gitee.io_2020_06_07_blog003_002.jpg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90YW5naHVhbjA4MjcuZ2l0ZWUuaW8vMjAyMC8wNi8wNy9ibG9nMDAzLzAwMi5qcGc?x-oss-process=image/format,png
[https_tanghuan0827.gitee.io_2020_06_07_blog003_002.jpg_https_tanghuan0827.gitee.io_2020_06_07_blog003_002.jpg]: https://tanghuan0827.gitee.io/2020/06/07/blog003/002.jpg
[https_tanghuan0827.gitee.io_2020_06_07_blog003_003.jpg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90YW5naHVhbjA4MjcuZ2l0ZWUuaW8vMjAyMC8wNi8wNy9ibG9nMDAzLzAwMy5qcGc?x-oss-process=image/format,png
[https_tanghuan0827.gitee.io_2020_06_07_blog003_003.jpg_https_tanghuan0827.gitee.io_2020_06_07_blog003_003.jpg]: https://tanghuan0827.gitee.io/2020/06/07/blog003/003.jpg
[git]: https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
[Gitee]: http://git.mydoc.io/?t=154714
[https_tanghuan0827.gitee.io_2020_06_07_blog003_004.jpg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90YW5naHVhbjA4MjcuZ2l0ZWUuaW8vMjAyMC8wNi8wNy9ibG9nMDAzLzAwNC5qcGc?x-oss-process=image/format,png
[https_tanghuan0827.gitee.io_2020_06_07_blog003_004.jpg_https_tanghuan0827.gitee.io_2020_06_07_blog003_004.jpg]: https://tanghuan0827.gitee.io/2020/06/07/blog003/004.jpg
[https_tanghuan0827.gitee.io_2020_06_07_blog003_005.jpg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90YW5naHVhbjA4MjcuZ2l0ZWUuaW8vMjAyMC8wNi8wNy9ibG9nMDAzLzAwNS5qcGc?x-oss-process=image/format,png
[https_tanghuan0827.gitee.io_2020_06_07_blog003_005.jpg_https_tanghuan0827.gitee.io_2020_06_07_blog003_005.jpg]: https://tanghuan0827.gitee.io/2020/06/07/blog003/005.jpg
[SSH key]: http://git.mydoc.io/?t=154712
[Hexo]: https://www.zhihu.com/question/24422335
[https_tanghuan0827.gitee.io_2020_06_07_blog003_006.jpg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90YW5naHVhbjA4MjcuZ2l0ZWUuaW8vMjAyMC8wNi8wNy9ibG9nMDAzLzAwNi5qcGc?x-oss-process=image/format,png
[https_tanghuan0827.gitee.io_2020_06_07_blog003_006.jpg_https_tanghuan0827.gitee.io_2020_06_07_blog003_006.jpg]: https://tanghuan0827.gitee.io/2020/06/07/blog003/006.jpg
[NexT]: http://theme-next.iissnan.com/