Windows下搭建Hexo静态博客

WEB harry 4个月前 (09-10) 131次浏览 6个评论 扫描二维码

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

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

打赏

不吐不快, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Windows下搭建Hexo静态博客
发表我的评论
取消评论

请输入验证码 *

表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 小棉袄好厉害,二年级就会写博客了!
    孙威2019-01-07 16:36 回复
    • 谢谢夸奖!现在还不能给她平板或者电脑,控制不住自己,只能把她周记拍照上传了。 不过开始觉得hexo可能写起来比较方便,但现在发现上传必须电脑。还是算了,最后改了Typecho,手机也可以随便发了。 等过两年再交给她
      harry2019-01-07 16:52 回复
      • 真是位有心的爸爸~ 我也给儿子女儿买了个域名,还没琢磨过该怎么玩儿呢。
        孙威2019-01-07 17:00 回复
        • 我在她出生时买了这个mianao的,当时是想我先记录,等她大点了一起写。结果现在又买了一个域名,等她大些能自己写了再说吧。她记录她的,我记录我的
          harry2019-01-07 17:08 回复
          • 哈哈,已用feedly订阅你的blog了~
            孙威2019-01-09 10:03
          • 谢谢,东西写的很少。 草稿里面还有去年这个时候写的标题和关键词,不知道拖延到什么时候才能发出来呢。 人到中年就觉得时间特别不够用,当然,钱更不够用
            harry2019-01-09 10:06