前言

今天,带大家利用Hexo和GitHub搭建属于自己的个人博客。

配一张图

Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成##静态网页##。
HEXO
传送门:Hexo官网中文文档

环境配置

1. 安装&配置git

  1. 访问git官网,下载git。

  2. 双击exe文件安装,一路next即可。

  3. 安装好git之后,配置用户名和邮箱。打开git-bash:

    1
    2
    3
    4
    # 配置全局用户名
    git config --global user.name "yourname"
    # 配置全局邮箱
    git config --global user.email "youremail@qq.com"

用户名和邮箱同你的GitHub(如果没有,去GitHub官网注册一个,注册好后记得邮箱验证才能使用。)

  1. 配置ssh。打开git-bash:
    1
    2
    #输入,回车
    ssh-keygen

git-bash

复制(右键+复制,不能ctrl+c,这里ctrl+c是结束命令的意思)图中的/c/Users/Administrator/.ssh/id_rsa,然后把它粘贴(右键+粘贴)到冒号后面,然后回车,回车,回车。。。直到结束(中间的冒号,除了第一个不用管只管回车)。

  1. github上生成ssh key,是本地Git绑定GitHub。
    网页上打开github -> 点击头像 -> Settings -> 左边菜单找到 SSH and GPG keys -> New SSH key(绿色按钮)-> title随便填(用英文)-> key值(打开/c/Users/Administrator/.ssh/id_rsa所在的文件夹,找到id_rsa.pub,注意是pub后缀那个文件,用记事本打开,复制里面的内容,粘贴到key值。) -> 点击下面的Add SSH key -> 完成。

添加ssh key

2. 下载安装Node.js

  1. node.js下载地址

Node.js

  1. 安装步骤:一路默认就行(安装路径根据自己需要更改)

安装&使用Hexo

  1. 在D盘下(其他地方也可以)创建一个空文件夹(命名为你主页的名字或者HEXO,随便啦,这里以名为MyBlog为例)

  2. 打开cmd命令窗口(桌面任务栏最左边那个wins图标-> 搜索 -> 输入cmd ,回车)。切换到D盘:(输入,回车)D: -> 切换到刚才建的空文件夹:(输入,回车)cd MyBlog

  3. 安装Hexo

    1
    2
    3
    4
    # 切换国内源
    npm config set registry="http://registry.cnpmjs.org"
    # 安装hexo
    npm install -g hexo

等待安装完成。

  1. 初始化Hexo:
    1
    2
    3
    4
    # 初始化Hexo
    hexo init
    # 安装必要模块
    npm install

这时,MyBlog文件夹下就生成了一些文件。文件目录如下:

1
2
3
4
5
6
7
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

到此博客已经配置好了(虽然是默认的样子)

  1. 测试一下:
    1
    2
    3
    4
    # 生成静态文件
    hexo g // 或 hexo generate
    # 本地测试
    hexo s // 或 hexo server

然后浏览器上查看 http://localhost:4000

是不是可以看到一个简单的网页(如果不能,有可能是4000端口被别的程序占用了,自行百度解决方案)。

个性化

1. _config.yml文件

打开该目录下的_config.yml文件。(用什么软件打开?你可以用editplus或者vs 等,也可以直接用记事本,就是比较难看,建议下个editplus吧。)

修改成你想要的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 换成你的主页标题
subtitle: 主页副标题
description: 主页介绍的一句话
author: 你的名字
language: zh-CN #语言
timezone: Asia/Shanghai #时区

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

permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 5
pagination_dir: page

index_generator:
per_page: 5

archive_generator:
per_page: 500
yearly: true
monthly: true

tag_generator:
per_page: 100

category_generator:
per_page: 100


# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: 你用的主题文件夹名字 # themes下的文件

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repository: GitHub仓库地址
branch: master

2. 修改主题

hexo官网主题中找一个喜欢的主题。

找到后,一般都有介绍怎么使用该主题的文章,如果没有,把网页拉到最下面。看到:2018 | Powered by Hexo Theme by Aath
点击Theme by 后面的连接,一般会简介到本主题在GitHub上的仓库地址。

根据说明,下载配置主题。

  1. 下载主题。比如:
    1
    2
    # 切换到MyBlog文件下,cmd执行
    git clone -b master https://github.com/lewis-geek/hexo-theme-Aath.git themes/aath

一般,它会自动下载到themes文件夹下。

  1. 跟换博客的主题:
    下载好后,你在_config.yml(主题是MyBlog文件夹下的)中的theme:处配置成你下在的主题名字(就是下载的主题文件夹名字 )

  2. 配置主题:
    根据GitHub上的说明配置themes/主题名目录下的_config.yml(不要与MyBlog的_config.yml搞混)。不同主题,配置起来不一样,所以在此不详解了。

发布到GitHub

  1. Github上新建仓库:
    打开GitHub网页,点击头像旁边的“+”号 -> New repository -> 填写名字(必须是:你GitHub的名字.github.io

如图

  1. 本地配置Git:
    在MyBlog文件夹下的_config.yml配置(大约在底部位置):

    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: http://hexo.io/docs/deployment.html
    deploy:
    type: git
    repository: https://github.com/wzmyyj/wzmyyj.github.io.git
    branch: master
  2. 上传:

    1
    2
    3
    4
    5
    6
    # 如果想把原来的清除
    hexo clean
    # 重新生成静态文件
    hexo g
    # 上传到提交文件
    hexo d

第一次提交需要GitHub登录账号和密码。

上传完成后,浏览器打开:https://你的GitHub名字.github.io 就是你的博客主页地址了。(GitHub响应比较慢,刚上传需要等一小会才能打开最新的。)

写文章

  1. 新建一篇文章:
    1
    2
    # 新建
    hexo new post 文章名

Myblog\source\_posts目录下你将看到一个新建的文章名.md文件。

  1. 编辑文章:
    用editplus打开编辑,用Markdown格式书写。

    保存时,记得把编码方式改成utf-8。Document -> File Encoding -> Convert Encoding…

建议用简书写(简书设置里把编辑器改成Markdown),然后复制过去。好处是图片存在简书上,访问起来快些。

  1. 上传:(和前面一样)
    1
    2
    3
    4
    5
    6
    7
    8
    # 如果想把原来的清除
    hexo clean
    # 重新生成静态文件
    hexo g
    # 本地测试
    hexo s
    # 上传到提交文件
    hexo d

到此,你的博客主页已经完成。


跟换域名

  1. 购买一个域名。(阿里云,腾讯云,万网均可注册购买域名)

  2. 修改你域名的DNS地址为 dns22.hichina.com, dns21.hichina.com

  3. 域名解析上,CNAME到你的GitHub名字.github.io
    域名解析

  4. 然后在你的本地站点目录里的source目录下添加一个CNAME文件。以文本编辑器打开CNAME,里面添加你的域名(不加http://)。

  5. 在MyBlog文件夹下的_config.yml配置url:

    1
    2
    3
    4
    # URL
    ## If your site is put in a subdirectory,
    ## set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://wzmyyj.top //你的域名
  6. 重新生成静态文件和上传到GitHub。

附件

1. 参考文献:

Hexo环境搭建2018年5月版
搭建个人博客-hexo+github详细完整步骤
我的博客是如何搭建的(github pages + HEXO + 域名绑定)
Hexo中文文档

2. 我的主页:

欢迎大家浏览我的主页:http://wzmyyj.top/

wzmyyj