如何搭建一个最简单的博客?

hexo+next+github

2019-09-09   博客教程

为什么要搭建一个只有静态页面的博客?

为了回归到搭建博客的初衷——养成思考的习惯(输入)与提高表达能力(输出)。至于页面有多漂亮,动画有多么牛逼,这不是我们该主要考虑的问题。我们的方向错了,越努力越失败。就像我之前,总想做到其他人的博客那样的效果,然后去各种查资料,但是就不去写东西。然后这个博客就一直没有写。搭建完就放在那里。然后过了一年,回头去看自己当初搭建的博客,只有寥寥几篇文章。

将军赶路,莫追小兔。将军有自己的目标,不能因为在路边看到一只肥美的兔子,就放下手中正在追赶的大目标,而去追逐兔子这个小目标。很多人蹉跎医生,并非是因为懒散,而是有太多像“兔子”这样看似有收获的小目标,不断分散着他的精力,在人生的大目标上投入太少,最终蹉跎医生。

1. 准备工作

01 安装git

git官网:https://git-scm.com/

安装好后,打开命令行(打开命令行方法:win+r 输入cmd),输入如下命令( git –version ),查看是否安装成功

git --version

02 安装node.js

Node.js下载地址:https://nodejs.org/en/download/

安装好后,输入如下命令,查看是否安装成功

node -v
npm -v

Hexo基于Node.js,安装Node.js会包含环境变量及npm的安装。

2. 安装hexo、安装next主题、调试

参考

https://hexo.io/zh-cn/docs/setup

http://theme-next.iissnan.com/getting-started.html#install-next-theme

01 使用npm安装hexo

npm install -g hexo-cli

02 建站

进入命令行(win+r 输入cmd)或者在需要建站的文件夹右键git bush here

$ hexo init blog   #在一个名为“blog”的文件夹新建一个网站。如果没有指定位置,则默认在当前位置建立网站
$ cd <folder>
$ npm install

查看是否安装成功

hexo version

03 安装next主题

cd blog  #定位到hexo站点目录下
git clone https://github.com/iissnan/hexo-theme-next themes/next

04 启用next主题

编辑 站点配置文件 (即 _config.yml 文件,路径是 /blog ,用notapad打开,notepad是一款文本编辑器),找到theme字段,修改为next

theme: next

05 测试

启动hexo本地站点,并开启调试模式。按ctrl+C停止

hexo s --debug

浏览器中输入 http://localhost:4000 即可预览你刚刚建立的博客

注意:

  • 此时你的博客只能本地访问,还没有发布到互联网上,要可以在网上访问,需要将hexo博客托管到github pages上。

3. 主题设置

主题配置文件 theme/next/_config.yml

站点配置文件 hexo安装目录/_config.yml

参考:http://theme-next.iissnan.com/theme-settings.html

01 选择scheme

修改 主题配置文件,取消scheme: Gemini注释

02 设置语言

编辑 站点配置文件,将language设为

language: zh-Hans

03 设置 菜单

编辑主题配置文件

设定菜单内容,对应的字段是 menu。 菜单内容的设置格式是:item name: link。其中 item name 是一个名称,这个名称并不直接显示在页面上,她将用于匹配图标以及翻译。

menu:
  home: / || home
  about: /about/ || user
  categories: /categories/ || th
  search: /search/ || search

04 设置 头像

编辑 主题配置文件, 修改字段 avatar, 值设置成头像的链接地址

站点内的地址

将头像放置主题目录下的 source/uploads/ (新建 uploads 目录若不存在) 
配置为:avatar: /uploads/avatar.png

或者 放置在 source/images/ 目录下 
配置为:avatar: /images/avatar.png

05 侧边栏社交链接

链接放置在 social 字段下,一行一个链接。其键值格式是 显示文本: 链接地址

# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/your-user-name
  豆瓣: http://douban.com/people/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name
  # 等等

设定链接的图标,对应的字段是 social_icons。其键值格式是 匹配键: Font Awesome 图标名称匹配键 与上一步所配置的链接的 显示文本 相同(大小写严格匹配),图标名称 是 Font Awesome 图标的名字(不必带 fa- 前缀)。enable 选项用于控制是否显示图标,你可以设置成 false 来去掉图标。

06 本地搜索

在站点的根目录下执行以下命令:

npm install hexo-generator-searchdb --save

编辑 站点配置文件,新增以下内容到任意位置:

search: 
path: search.xml 
field: post 
format: html 
limit: 10000

编辑主题配置文件,启用本地搜索

# Local search 
local_search:
enable: true

07 永久链接

安装

npm install hexo-abbrlink --save

打开站点config.yml,修改permalink

permalink: posts/:abbrlink/

其中:abbrlink代表连接地址。

添加如下选项

abbrlink:
  alg: crc16  #support crc16(default) and crc32
  rep: dec    #support dec(default) and hex

链接格式

crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

08 隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,使用””隐藏之间的代码即可,或者直接删除

<!--






-->

09 添加顶部加载条

打开/themes/next/layout/_partials/head.swig文件,添加如下代码

<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="">
添加位置
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

但是,默认的是粉色的,要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码(接在刚才link的后面)

10 自定义NexT.Gemini主题的样式

themes\next\source\css\_custom\custom.styl文件中加入以下代码,一开始里面什么都没有的,它是NexT主题作者留给我们用作自定义主题样式的。

// Custom styles.
// 关闭<div class="headband"></div>
.headband {
	display:none;
}

// 修改首页头像
.site-author-image {
	border-radius: 50%;
}

4. 将本地博客托管到github pages

01 新建repository

登陆github之后,点击页面右上角的加号,选择New repository,设置代码库名称为 username.github.io

打开这个库的setting页面,向下拖动,直到看见GitHub Pages。

注意:

  • username是你github的用户名,仓库名必须这样设置,如果不这样设置就无法通过 username.github.io 来访问博客。

02 将你的git和github绑定

1、单击鼠标右键,选择 “Git Bash Here”

2、依次输入如下命令(注意:#号后的内容,包括#号是说明内容,不需要输入)

git config --global user.jkdigger  #改成你自己的用户名

git config --global user.jkdigger@163.com #改成你自己的github邮箱

ssh-keygen -t rsa -C jkdigger@163.com #改你自己的github邮箱

3、连续三个回车

4、去这个路径 C:\Users\你自己的电脑用户名 找到 id_rsa.pub 文件,用记事本打开,然后复制里面的内容

5、打开 GitHub_Settings_keys 页面,新建new SSH Key,title可随意输入,key里输入刚才复制的内容,最后点击Add SSH key

6、输入( ssh git@github.com ),看到(connection to github closed )即可。

03 编辑 站点配置文件

在最底部输入如下内容

deploy:
type: git
 repo: git@github.com:jkdigger/jkdigger.github.io.git  #改成你自己的用户名
branch: master

04 安装Git部署插件

npm install hexo-deployer-git --save

05 生成静态文件、部署网站

hexo clean  #清理缓存
hexo g   #生成静态网页
hexo d   #部署网站

此时已经可以输入 jkdigger.github.io 来查看发布到互联网上的博客。

说明:

此时这个博客已经基本搭建完成了,但由于你的博客是托管在github pages上,你必须使用github提供的域名(username.github.io)。

如果你想要使用自己的域名(比如我的博客 jkdigger.com 域名),你需要去 阿里云、腾讯云之类的地方购买域名。然后完成域名的绑定。

06 如果报错需要关闭二次验证

ERROR Deployer not found: github

5. 购买、绑定自己的域名

01 购买域名

02 域名解析(以阿里云为例)

1、进入 管理控制台 ,选择要解析的域名,选择 解析

2、添加解析

第一条

  • 记录类型 A
  • 主机记录 @
  • 记录值 一个ip地址 (这个值在电脑上打开命令行,输入 ping jkdigger.github.io 得到)
  • 解析线路、TTL默认

第二条

  • 记录类型 CNAME
  • 主机记录 www
  • 记录值 jkdigger.github.io或一个ip地址
  • 解析线路、TTL:默认

03 绑定域名

1、新建内容为 jkreading.com 的文本文件,文件名为 CNAME,保存为所有文件而不是text。然后删除后缀 .txt

2、保存 CNAME 文件到 /blog/source

这样每次hexo deploy后CNAME文件就不会消失。

3、依次输入 hexo clean, hexo g, hexo d

此时浏览器中输入 jkreading.com 就可以打开自己的博客。

6. 发布文章

# Create a new post
hexo new "My New Post"

# clean
hexo clean

# Generate static files
hexo g

# Deploy to remote sites
hexo d

测试

hexo s --debug