WEB

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 记录不用管也没法加。

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

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

回复

  1. 孙威 孙威
    Chrome 71 10

    小棉袄好厉害,二年级就会写博客了!

    1. harry harry
      Chrome 71 O

      谢谢夸奖!现在还不能给她平板或者电脑,控制不住自己,只能把她周记拍照上传了。
      不过开始觉得hexo可能写起来比较方便,但现在发现上传必须电脑。还是算了,最后改了Typecho,手机也可以随便发了。
      等过两年再交给她

      1. 孙威 孙威
        Chrome 71 10

        真是位有心的爸爸~
        我也给儿子女儿买了个域名,还没琢磨过该怎么玩儿呢。

        1. harry harry
          Chrome 71 O

          我在她出生时买了这个mianao的,当时是想我先记录,等她大点了一起写。结果现在又买了一个域名,等她大些能自己写了再说吧。她记录她的,我记录我的

          1. harry harry
            Chrome 71 7

            谢谢,东西写的很少。
            草稿里面还有去年这个时候写的标题和关键词,不知道拖延到什么时候才能发出来呢。
            人到中年就觉得时间特别不够用,当然,钱更不够用

          2. 孙威 孙威
            Chrome 71 10

            哈哈,已用feedly订阅你的blog了~

This is just a placeholder img.