Hexo+GitHub搭建个人博客

发表于 | 分类于 | 阅读次数:

Hexo+GitHub搭建个人博客

基本环境

1、下载并安装Node.js：https://nodejs.org/en/
U1myO1.png

2、下载并安装Git：https://git-scm.com/download/win
U1nJ9e.png

查看Git安装是否完成，在win+r中输入cmd命令窗口弹出后，输入git –version查看git版本：
U1nccj.png

3、Github注册和创建仓库：https://github.com
创建完Github账号后，创建一个仓库来管理自己的文件。
（1）点击个人主页右上角“+”里面的 New repository。
U1nfH0.png
（2）输入Repository name：用户名.github.io，这里的用户名一定要和注册时候的一样！
U1usVx.png
（3）点击Create repository。

4、配置SSH免密登录
（1）在桌面点击鼠标右键，选择Git Bash Here，打开Git Bash客户端。
（2）设置user name和email：

1
2
git config --global user.name "GitHub用户名"
git config --global user.email "GitHub注册邮箱"

（3）生成SSH密钥。
1
ssh-keygen -t rsa -C "GitHub注册邮箱"

（4）输入命令后直接回车即可，在C盘的用户目录下会生成.ssh文件夹。
（5）在Github上添加SSH keys。具体步骤是点击Github头像下的Settings->SSH and GPG keys->New SSH key，将本地的公钥id_rsa_pub内容复制粘贴到其中即可。
U1M5UP.png
（6）验证SSH免密是否成功。
1
ssh -T git@github.com

安装Hexo

1、创建一个文件夹，比如文件名为Hexo，进入到该文件夹里，在文件导航栏里输入cmd进入命令提示符，输入以下命令安装Hexo:

1
2
3
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install hexo-cli -g
cnpm install hexo --save

2、初始化hexo，在blog目录下点击鼠标右键，打开Git Bash终端
1
hexo init

3、在cmd中输入以下命令安装依赖以及相关插件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
cnpm install
cnpm install hexo-generator-index --save
cnpm install hexo-generator-archive --save
cnpm install hexo-generator-category --save
cnpm install hexo-generator-tag --save
cnpm install hexo-server --save
cnpm install hexo-deployer-git --save
cnpm install hexo-deployer-heroku --save
cnpm install hexo-deployer-rsync --save
cnpm install hexo-deployer-openshift --save
cnpm install hexo-renderer-marked@0.2 --save
cnpm install hexo-renderer-stylus@0.2 --save
cnpm install hexo-generator-feed@1 --save
cnpm install hexo-generator-sitemap@1 --save

4、启动Hexo
1
hexo server

5、在浏览器中输入：localhost:4000，可以看到Hexo的示例页面
U1GJ9x.png

将博客部署到Github

1、在上面创建的Hexo文件夹中找到_config.yml文件，用文本编辑器打开，在最下方添加远程仓库地址：

1
2
3
4
5
6
7
8
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  #xxx改为你的github用户名（请修改）
  #注意，如果repository写成https://github.com，在提交任务至Github时，会频繁输入用户名密码
  repository: git@github.com:xxx/xxx.github.io.git
  branch: master

2、在Hexo\source_post目录下右击选择Git Bash Here,使用以下命令新建博客，会生成firstblog.md的文件
1
hexo new "firstblog"

3、可以根据Markdown语法来编辑上面生成的文件
4、设置身份信息
1
2
git config --global user.name "GitHub用户名"
git config --global user.email "GitHub注册邮箱"

5、部署到Github上
1
hexo d -g

6、如果遇到到ERROR Deployer not found: git提示，可以尝试使用以下命令后再重新部署到Github上
1
npm install --save hexo-deployer-git

7、在浏览器上输入：用户名.github.io即可看到刚才写的博客已提交到仓库，在这一步可能你看到的是<%- partial(‘_partial/head’) %>，等一小会后刷新就可以了，至此，一个简单的博客就搭建好了，接下来就可以美化我们的博客了。

美化博客

基于hexo博客系统的主题有很多，你可以在这里找到你喜欢的主题。我采用的是next主题，以下是注意的几点：

  • next主题的官方网站详细阐述了主题的基本配置过程，我也是参照它一步步进行配置的
  • 在配置主题的过程中要注意区分两个配置文件，一个是主题的配置文件_config.yml，一个是站点的配置文件_config.yml。因为有些配置操作实在主题的配置文件中进行的，有的实在站点的配置文件进行的，一定不能弄混了。
  • 推荐一篇next主题美化的博文
  • 对主题进行配置时，建议是每修改一项之后都在本地运行一下（先运行hexo g命令，在运行hexo s命令，在浏览器中查看），看看有没有出错，这样可以及时找到出错的地方。

撰写博客

1、可以使用Markdown语法来撰写自己的博客内容，在博客内容之前加上如下语句：

1
2
3
4
5
---
title: Hello World #自己的博客标题
tags: test #博客标签
categories: test #博客分类
---

2、之后将博客导出为md格式放到Hexo根目录下的source_posts文件夹里
3、使用hexo d -g将博客部署到github上