Windows下搭建Hexo静态博客

我喜欢 WordPress,为什么又开始搞 Hexo 这种静态博客了呢?小棉袄上二年级了,老师要求每周要写不少于一篇的日记,所以我打算给她弄个博客自己记录了。
本来,这个mianao.info 就是她出生的时候我为她申请的,可是一直都是我在写,目前看 WordPress 还不适合她用,先弄个 Hexo 试试吧。架构不重要,内容才是关键。

什么是Hexo

Hexo 官方网站 https://hexo.io/zh-cn
静态博客生成器,基于 node.js,还有其他类似的 Hugo,Jekyll等等。我选 Hexo 的原因很简单,主题精致好看。

环境安装

  1. 安装 git https://github-windows.s3.amazonaws.com/GitHubSetup.exe 我选择的是 GitHub 官方客户端,带界面也有命令行。
  2. 安装 node.js 官网下载:https://nodejs.org

安装很简单,没什么好说的。

Hexo 安装

在桌面找到 Git Shell运行(Git Bash 命令行,在 GitHub 客户端选项里可选):
首先进入 node.js 安装文件夹,我摸索了半天才搞明白这个 cd 命令,如下:

cd /c/"Program Files"/nodejs
npm install -g hexo-cli

为什么会有双引号?我也不知道,进入 c 盘后输入 ls可以看到,有的文件夹带引号有的不带,我估计是权限问题。注意盘符 c 小写。我对 GitHub 命令行不太熟,一般都是打开客户端。
安装完成后:

hexo version #查看版本

新建一个文件夹如 blog,用来放置 Hexo 博客相关文件,然后初始化:

cd /d  #进入d盘
mkdir blog #新建blog文件夹
cd blog #进入blog
hexo init #初始化
npm install #安装依赖包
hexo g #生成静态页面
hexo s -p 2018 #设置本地运行端口号,默认是4000

这时候本地浏览器打开 http://localhost:2018应该可以看到 Hexo 博客初始界面了。

GitHub 账号设置

账号申请我就不说了,新建一个 new repository,必须是 GitHub 账号名称后面加上.github.io如我的 GitHub 账号是 harry3633 就写:harry3633.github.io。初始化 README记得要勾选。(SSH key 不用设置了)
可在该 repository 的设置里查看 options ,下方有个 GitHub Pages,这里一定要看到带 github.io 的链接。

Hexo 配置及上传博客

修改下 Hexo 的设置并上传就可以了:
打开上面已经创建的 blog 文件夹,用文本编辑器打开 _config.yml 我一般用 notepad++编辑器。
注意,配置文件里冒号后面必须要有一个空格。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://harry3633.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/harry3633/harry3633.github.io
  branch: master

和 GitHub 相关的设置就是以上两项。

npm install hexo-deployer-git --save
hexo clean #清除缓存
hexo g #生成静态页面
hexo d #上传到GitHub

上传完成后打开 harry3633.github.io链接就可以看到博客了。

Hexo 其他设置

_config.yml里还有其他的设置,可到 Hexo 官网查看相关功能。

发布及删除文章

文章都是.md格式,存储在blog\source\_posts里,文章为 markdown 编写,具体格式可参考官方给的hello-world.md文章。
xxx.md文章放到该文件夹,在 git shell 里进入该目录 blog 后运行hexo g -d
删除文章更简单,直接删除文件后运行hexo g -d

修改主题

我比较喜欢这个主题 Next,主题文件夹里也有 _config.yml 可以修改主题风格等等。
如果想修改网站 favicon,请到此目录下更换 blog\themes\next\source\images

cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

进入博客文件夹后直接克隆主题,自动加到 theme 文件夹里。
修改 Hexo 配置文件:

# Site
title: XiaoMianAo
subtitle: 副标题
description: 说明
keywords: 关键词
author: Xiaomianao
language: zh-Hans
timezone: Asia/Hong_Kong

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

修改完成后上传:

hexo clean
hexo g
hexo d
绑定域名

在你的本地站点目录里的 source 目录下添加一个 CNAME 文件,不带后缀。用文本编辑器打开 CNAME,里面添加你的域名信息,如 mianao.info (不要http://)。然后重新部署到 GitHub 上:

hexo clean
hexo g
hexo d

修改域名解析,增加一个 CNAME 记录:

www CNAME harry3633.github.io

@ 185.199.108.153

启用 HTTPS 需要增加下方 A 记录,至少一个:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

在仓库的设置里查看 options ,查看下方 GitHub Pages 已经默认勾选了 Enforce HTTPS
如果是绑定二级域名,只需一个 CNAME 即可,A 记录不用管也没法加。

打完收工,直接去访问域名吧!

赞赏

微信赞赏支付宝赞赏

发表评论

电子邮件地址不会被公开。 必填项已用*标注

请输入验证码 *