hexo+github搭建个人博客

发表于 |

1.概序

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页

  • 该教程默许你有基本的计算机基础知识
  • 该教程默许你会基本的markdowm语法，如果还不熟悉，不要着急，赶快去看一下吧

该教程一些词汇如下
站点配置文件：你博客目录下面的_config.yml文件
主题配置文件：你博客目录下面的主题文件夹中的_config.yml文件，例如我的就是/blog/themes/next/_config.yml

2.必要的准备条件

  • 你的pc上面必须安装了node.js和git
  • 一个github账号
  • 一个独立的个人域名（如果自己需要解析到自己的域名上面的话）
  • 你需要有一个合适的文本编辑器，推荐使用sublime text，轻量级，界面美观，插件丰富

3.安装node.js和git

去node的官网下载LTS长期稳定版本
去git的官网下载git
一步一步安装，直到出现以下就代表安装成功了：
cmd

4.安装hexo

4.1全局安装hexo

1
npm install -g hexo-cli

如果出现以下界面，证明hexo安装成功了
hexo

4.2新建博客

在自己电脑合适的地方新建一个文件夹（以我的电脑f:\hexo文件为例），cd到该目录输入以下

1
hexo init blog

这段代码可能需要那么几分钟，不要着急，毕竟我大天朝有中国特色的防火墙。
安装完成之后cd到blog目录，输入以下命令：

1
hexo server -p 5000

打开浏览器输入: http://localhost:5000（如果直接输入hexo server,就是默认的4000端口），看到如下界面就代表安装成功了
image

4.3新建一篇文章吧

在终端输入以下指令

1
hexo new 你好世界

这时，你的blog目录下的/source/_post/ 文件夹会出现一个你好世界.md的文件，用你喜欢的文本编辑器编辑，保存，然后刷新浏览器，看看效果吧


5.安装一个合适的主题（非必要）

博客虽然跑起来了，但是不符合天朝的审美观，现在我们就可以安装一个合适的主题，毕竟逼格也是很重要的。我们以next 主题为例
在博客目录运行以下指令：

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

这个操作可能要下载几分钟，这里忍不住要吐槽我大天朝的防火墙。下载完成之后，编辑站点配置文件。搜索‘theme’，将theme改为next

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

修改完之后，重启服务（在终端按ctrl+C,然后运行hexo server指令），刷新浏览器，看看效果吧

6.关联Hexo与github page

6.1新建一个github代码仓库

在你的github界面新建一个名称为yourname.github.io的repo

注意：比如我的github名称是test，这里你就填 test.github.io；如果你的名字是test1，那你就填 test1.github.io

6.3配置git和ssh和密钥

1
2
git config --global user.name "yourname"
git config --global user.email "yourname@email.com"
1
ssh-keygen -t rsa -C "yourname@email.com"

具体教程可以查看一些教程

6.4关联github

编辑站点配置文件找到Deployment，做以下修改

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:yourname/yourname.github.io.git # 输入你的github地址即可
  branch: master

6.4发布到github

先安装一个扩展插件插件

1
npm install hexo-deployer-git --save

然后运行以下指令

1
hexo d -g

发布成功之后，访问你的地址：yourname.github.io吧

7.添加解析到自己域名

在你的yourname.github.io项目中配置如下


在你购买域名服务商的后台添加几条解析记录，以阿里云为例


如果不出意外的话，过几分钟，直接访问你的域名地址就可以正常访问了

8.其他

如果在npm install中出现安装非常慢的情况，建议使用淘宝的cnpm

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

然后使用cnpm install指令即可

博客基本配置

编辑站点配置文件，找到‘site’

1
2
3
4
5
6
7
# Site
title: 博客标题
subtitle: 博客副标题
description: 自己的描述
author: 作者名称
language: zh-Hans # 网站语言
timezone: Asia/Shanghai # 网站时区

增加打赏

编辑主题配置文件，找到‘reward_comment’

1
2
3
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /images/wechat.jpg
alipay: /images/alipay.jpg

然后将你的支护宝和微信的付款码图片放在主题目录的/source/images/文件夹下面

增加评论系统

现在有两个选择：多说，Disqus。由于多说即将关闭，为了博客的逼格，所以以Disqus为例
你要注册一个Disqus账号，拿到你disqus的disqus_shortname。然后编辑主题配置文件，找到’disqus_shortname’

1
2
3
4
# Disqus
disqus_shortname: your_disqus_shortname
# Hypercomments
#hypercomments_id:

注意：有些next主题和本人版本不同，可能配置的选项有所不同，但是大部分都大同小异，大家可以多上网折腾以下

参考链接

  1. hexo 官方文档
  2. next 主题官网文档
  3. 一些教程
坚持原创技术分享，您的支持将鼓励我继续创作！