0%

Hexo + Git 搭建免费的个人博客


前言

个人博客日益流行,大家都开始搭建自己的博客,记录成长中学习中的点点滴滴,最近觉得自己也需要有一个平台整理自己的所学所想,于是用了将近3天的时间 (实际上一天就能搞定的!) 使用 Hexo + Git 搭建了自己的个人博客,提高自己的学习动力,没事的时候可以拿出来温习下,提高下本人的渣渣水平。目前仍有很多功能没有添加,留着日后慢慢完善。准备将自己的第一篇博客献给 Hexo,表示对 Hexo 的感谢。下面详细介绍下搭建流程,有任何不懂的问题欢迎 联系我 或者在下面评论。另外个人能力有限,接受任何建议或者吐槽!共同进步 (●’◡’●)。

Hexo 简介

大家所熟悉的博客框架莫过于 Wordpress,还有 Jekyll 等,博主在查阅了大量资料后选择了 Hexo,Hexo 是一个快速、简洁且高效的博客框架。可以方便快捷的生成博客网页。Hexo 由台湾大学生 tommy351 开发,是一个基于 Node.js 的静态博客程序。支持多种主题,博主选择的是 NexT 主题。使用 Hexo + Git 搭建博客不需要购买域名和服务器,由 GitHub 提供域名和网站页面空间。

安装 Hexo

注意: 本文针对 Windows 平台和 Hexo 3.x 【其实后来我也在 Ubuntu 上试了一下,完全一样的】

准备

在安装 Hexo 之前,请确认你已经安装了以下程序:

安装

在自己认为合适的地方创建一个文件夹作为博客项目的目录,进入文件夹,然后鼠标右键选择 Git Bash Here,依次输入:

1
2
3
4
npm install -g hexo-cli
npm install hexo --save
npm install hexo-renderer-swig # Hexo 5.0 版本之后手动安装swig渲染器,部分主题需要
hexo -v # 查看版本

输入 hexo -v 后输出以下内容表示安装成功了(可能版本有差别):

1
2
3
4
5
6
7
8
9
10
11
12
13
$ hexo -v
hexo: 3.2.0
hexo-cli: 1.0.1
os: Windows_NT 10.0.10586 win32 x64
http_parser: 2.5.2
node: 4.4.2
v8: 4.5.103.35
uv: 1.8.0
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 46
openssl: 1.0.2g

体验 Hexo

接下来在当前的博客目录下,依次输入:

1
2
hexo init   # 初始化组件
npm install

之后 npm 将会自动安装你需要的组件,只需要等待 npm 操作即可。接着输入:

1
2
hexo s
hexo s --debug # debug模式

输出:

1
2
INFO  Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

说明你的博客可以在本地访问啦,打开浏览器输入 http://localhost:4000/ 试试看吧~

Hexo 使用

下面让我们创建第一篇文章吧,输入:

1
hexo n my-first   # 生成文章,或者 source\_posts 手动编辑

之后查看 source\_posts 下面就会出现 my-first.md, 编辑这个文件就是在编辑你的这篇博客,完成保存后输入:

1
2
hexo g # 生成 public 静态文件,这步不是必须的,当你需要生成的 Html 页面的时候输入这行代码
hexo s # 启动服务器,查看本地效果

浏览器中输入 http://localhost:4000/ 就会看到你刚刚编辑的博客了,如果发现无法访问的情况,可能是因为端口被占用或者你启用了代理【关掉就好】,运行如下命令修改端口:

1
hexo server -p 5000 # 5000为你想要修改的端口号

在服务器启动期间,Hexo 会监视文件变动并自动更新,您无须重启服务器。更多博客编辑技巧请参照 Hexo 中文文档

部署到 GitHub

创建代码仓库

首先你需要一个 GitHub 账号,然后创建一个仓库,仓库名是 yourname.github.io, 比如我的是 cylong1016.github.io

开启 gh-pages 功能

创建完成后点击界面右侧的 Settings,向下拖动,直到看见 GitHub Pages ,点击 Automatic page generator,Github 将会自动替你创建出一个 gh-pages 的页面。
如果你的配置没有问题,那么大约15分钟之后,http://cylong1016.github.io 这个网址就可以正常访问了~
之后打开本地博客目录下的 _config.yml 文件,最下面找到 Deployment , 做如下修改:

_config.yml
1
2
3
4
5
deploy:
type: git
repo: https://github.com/cylong1016/cylong1016.github.io.git
# cylong1016改成你的用户名
branch: master

接着在 Git Bash 中依次输入:

1
2
npm install hexo-deployer-git --save    # 安装使用 git 方式进行部署所需要的插件
hexo d # 部署到 GitHub 上,按照提示输入自己 GitHub 的用户名和密码。

部署会强制覆盖掉你之前生成的页面,在博客的目录下会产生 .deploy_git文件夹,不要删除,否则你的部署记录就会不见。之后就可以通过 http://cylong1016.github.io (cylong1016 替换成你的用户名)访问你的网站啦。在之后的部署时,建议输入以下代码:

1
2
3
4
hexo clean  # 清除之前 public 文件夹的内容
hexo g # 生成静态的 public 文件夹,部署时候也是直接拷贝此文件夹里的文件。
hexo d # 部署到 GitHub 上,按照提示输入自己 GitHub 的用户名和密码。
# hexo g 和 hexo d 这两条命令可以合并成 hexo d --g 或者 hexo g --d

更换主题

你可以在 Themes - Hexo 找到你喜欢的主题下载下来,放在博客目录下的 themes 目录下,之后修改 _config.yml 文件:

_config.yml
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next # 修改成你的主题文件夹名

Hexo 默认主题是 landscape,我使用的是 Next 主题,也是强烈推荐的,简洁、扁平化主题风格是我最喜欢的。配置使用 NexT 主题请参考:

NexT 主题中文文档

本来想单独写一个博客讲述主题方面的配置,不过这些都有官方文档,写的也都很详细,没必要做文章的搬运工(明明是博主很懒!)。如果有问题欢迎在下面提问 (●’◡’●)

使用自己的域名

购买域名

首先你需要一个域名。可以在 万网 或者 GoDaddy 购买,我的域名是在万网买的。【好不容易抢到 cylong.com 这个域名,之前被人注册了,不过在16年2月份的时候就过期了,哈哈哈】

设置 CNAME

在博客目录下的 source 文件夹下,创建一个名称为 CNAME 的文件,内容为你的域名,比如我的是:

source/CNAME
1
www.cylong.com

注意CNAME 文件是不带后缀的。另外带 www 和不带 www,虽然用户在访问的时候网页内容是一样的,但是搜索引擎却认为是两个网页,最好自己选择一个首选域。更多详情请参考:网站首选域 | 笑话人生

域名解析

简单来说就是让你的网站和你购买的域名对应起来。万网提供免费的 DNS 解析服务。也可以使用 DNSPod 的服务,但是要在域名注册商修改 DNS 服务地址为:

1
2
f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

我在万网购买的域名,所以直接进行解析配置【默认使用万网的 DNS 解析服务,没有使用 DNSPod 的服务】。配置过程如下:

  1. 登陆 万网
  2. 点击最上面的 管理控制台,再点击左侧的 云解析。或者直接点击首页查询域名框下面的常用链接:域名解析
  3. 选择你要解析的域名,点击域名后面的 解析
  4. 解析配置如下:

设置解析后大约几分钟就可以通过你的域名访问你的网站啦,如果你修改了 DNS 服务器,解析一般最长需要48小时生效。耐心等待吧~

感谢

史上最详细的 Hexo 博客搭建图文教程 | Xuanwo’s Blog
使用 GitHub 和 Hexo 搭建免费静态Blog | HelloDog

参考资料

Hexo 中文文档
NexT 主题中文文档
Hexo 使用总结 & 常见问题
分类:Hexo | 笑话人生


分享精彩,留下足迹

欢迎关注我的其它发布渠道