一个小站

  • 首页

  • 分类

  • 关于

使用Hexo+Github搭建博客(一)

发表于 2018-10-13 | 更新于 2018-10-21 | 分类于 Hexo

Hexo是一个静态博客系统,支持MarkDown语法。所有的文章直接以md文件保存,不需要数据库,迁移、备份都非常方便

在本地编辑博客文章,然后将其发布到Github上,就可以通过互联网访问,而不需要自己购买服务器

搭建博客的过程分为两步:

  • 使用Hexo在本地创建博客
  • 将博客文章发布到Github

Hexo

在安装Hexo之前,需要先安装node.js

安装node.js

浏览器打开 https://nodejs.org/en/download/ ,下载相应系统的安装文件,安装过程一直Next即可

安装完成后打开命令行,输入:

1
node --version

查看node的版本号,如果能正常显示,说明node已经安装成功

安装Hexo

使用node的包管理工具npm安装Hexo。因为npm的源服务器在国外,所以我们先将npm的源修改为淘宝的镜像

1
2
3
npm config set registry https://registry.npm.taobao.org

npm install hexo-cli -g

创建博客

接下来就是创建博客了,在D盘新建目录Blog

初始化

打开命令行终端,进入D:\Blog并执行初始化

1
2
cd Blog
hexo init .

执行之后,Blog目录结构如图:

生成静态网页

1
hexo generate

该命令用于将md文件生成静态网页。在每次发布文章之前,都需要执行该命令

运行服务器

1
hexo server

启动Hexo自带的web服务器,默认端口是4000。虽然我们会把博客部署到Github上,但是在编辑文章时,可以在本地电脑上预览

查看博客

在浏览器中输入 http://127.0.0.1:4000 即可看到博客的页面

Github

为了将Hexo的静态页面部署到Github上,需要先安装Git

安装Git

浏览器打开 https://git-scm.com/downloads ,下载相应系统的安装文件,安装过程一直Next即可

安装完成后,在桌面会多出Git的两个图标(如果没有的话,到开始菜单中找)

其中,Git Bash就是命令行终端,以后我们可以直接使用这个工具替代Windows系统自带的

为了方便,我们将Git Bash的默认启动目录设为D:\Blog

新建Github仓库

浏览器打开 https://github.com,新建一个仓库 (如果没有Github账号,先注册)

注意截图中的 mangochow.github.io 是固定格式,将mangochow替换为你的github用户名,github.io是必须的,不能更改

配置Git

这里,我们需要创建一个环境变量HOME,用于指定Git的工作目录,后面的Git的配置(账号和邮箱)、SSH密钥都存放在这个目录下
我们使用D:\Git作为HOME

账号和邮箱

打开Git Bash命令行,设置Github的用户名和邮箱

这时,在D:\Git目录下会多出一个.gitconfig文件

SSH密钥

  1. 生成密钥
    在Git Bash命令行中输入
    1
    ssh-keygen -t rsa -C "你的邮箱"

一直回车,生成的密钥在下图所示的路径下(每台电脑上的路径会有差别)

  1. 设置Github公钥

打开Github网站,在setting页面新建一个SSH key,将刚才生成的id_rsa.pub文件中的内容拷贝进去(title随便起,就叫blog好了)

  1. 测试
    在Git Bash中输入
    1
    ssh -T git@github.com

如果显示已成功连接,说明设置没有问题

将Hexo部署到Github

到这里,Hexo安装好了,Git也配置好了,接下来我们要把两者关联起来,从而将Hexo博客部署到Github上

设置

在浏览器中打开刚才新建的Github仓库,点击Clone and download并复制这个链接

打开D:\Blog目录下的_config.yml文件,搜索Deployment并修改

注意:从Github仓库拷贝的链接无法直接使用,需要将@符号之前的git替换为Github的用户名,这里为mangochow

部署

在最后部署之前,我们需要安装一个插件

1
npm install hexo-deployer-git --save

安装完成之后,依次执行

1
2
hexo generate
hexo deploy

然后在浏览器中打开网址 http://用户名.github.io/ 即可。同时,你会发现刚才创建的Github仓库中多了很多文件

结尾

下一篇文章,介绍Hexo的使用方法以及如何绑定个人域名

Hello World

发表于 2018-10-04

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

周忙狗

周忙狗

2 日志
1 分类
2 标签
GitHub E-Mail
© 2018 周忙狗