手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置

手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置

前言

有朋友问了我关于博客系统搭建相关的问题,由于是做开发相关的工作,我给他推荐的是使用github的gh-pages服务搭建个人博客。

推荐理由:

  1. 免费:github提供gh-pages服务是免费的,有300MB空间;

  2. 开源:由于github开源的原因,有很多人参与其中,自然技术支持很好。

  3. 便捷:博客完全托管在github上,基本上不需要花时间去管理,博客使用Markdown语法,上手很容易。

需要了解的内容(能掌握更好):

  • html+css+javascript

  • git基本语法

  • markdown语法

  • nodejs

目前,在github上搭建博客系统使用最多就是HexoJekyll
Hexo是基于Nodejs开发的,Jekyll是基于Ruby开发的。

通过两个系统使用的比较,个人习惯喜欢Hexo,所以本文介绍的是Hexo搭建博客,如果你对Jekyll也有兴趣,可自行学习。

安装Git客户端

已安装过的用户略过

  1. 下载Git客户端:下载地址手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置

  2. 安装Git客户端:Windows用户直接Next就可以了。Mac和Linxu系统的用户可通过命令方式安装,这里不详细介绍了。

注册GitHub

老手和已注册过的用户略过

  1. 打开GitHub官网:https://github.com/

  2. 填写注册信息进行注册操作:没有登录的用户打开网站首页就会显示注册的操作(如图所示),或者是点击Sign up按钮进入注册详情页。
    手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置

  3. 填写好注册信息,点击Sign up for GitHub(注册)按钮后,接下来是选择协议部分。根据自己的情况选择相关的协议,一般人选的都是免费的那一项。

创建仓库

  1. 登录github账号:在github首页点击Sign in按钮进入登录页面。填写用户名或邮箱和密码,点击Sign in按钮登录。
    手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置

  2. 点击创建仓库:点击在登录的用户图像左边的+号和下三角符号按钮。
    手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置

  3. 填写创建仓库信息:
    仓库名称必须是用户名.github.io(别问我为什么,人家就是这样规定的),比如我的用户名是SeayXu,就是SeayXu.github.io。

手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置

  1. 填写好相关信息,点击Create repository(创建仓库)按钮。

配置SSH

老手和已配置过的用户略过

  1. 打开Git Bash终端:在桌面右键,会出现"Git Bash here"的选项,点击即可。

  2. 设置user name和email:

$ git config --global user.name "你的GitHub用户名"
$ git config --global user.email "你的GitHub注册邮箱"
  1. 生成ssh密钥:输入下面命令

$ ssh-keygen -t rsa -C "你的GitHub注册邮箱"

一般情况下是不需要密码的,所以,接下来直接回车就好。
此时,在用户文件夹下就会有一个新的文件夹.ssh,里面有刚刚创建的ssh密钥文件id_rsaid_rsa.pub
注:id_rsa文件是私钥,要妥善保管,id_rsa.pub是公钥文件。

  1. 添加公钥到github:
    点击用户头像,然后点击显示的Settings(设置)选项;

手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置
在用户设置栏,点击SSH and GPG keys选项,然后点击New SSH key(新建SSH)按钮;
手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置
将id_rsa.pub中的内容复制到Key文本框中,然后点击Add SSH key(添加SSH)按钮;
手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置

  1. 测试SSH:

$ ssh -T [email protected]

接下来会出来下面的确认信息:

The authenticity of host 'github.com (207.97.227.239)' can't be established. 
RSA key fingerprint is 17:24:ac:a5:76:28:24:36:62:1b:36:4d:eb:df:a6:45.
 Are you sure you want to continue connecting (yes/no)?

输入yes后回车。
然后显示如下信息则OK(其中的SeayXu是用户名)。

Hi SeayXu! You've successfully authenticated, 
but GitHub does not provide shell access.

以上是准备工作。

创建本地仓库

打开Git Bash终端,等待执行命令。

  1. 新建仓库文件夹:这里就取名为blog。

$ mkdir blog
  1. 进入到blog文件夹:

$ cd blog # 切换到blog目录

初探Hexo

如果没有安装Nodejs,请先安装Nodejs,Nodejs官网
以下操作是在blog文件夹中。

  1. 安装Hexo

$ npm install hexo-cli -g

hexo全局安装一次就够了,后面可以直接使用hexo相关的操作。

  1. 初始化Hexo

$ hexo init
  1. 安装依赖

$ npm install
  1. 启动Hexo

$ hexo server

启动之后,打开浏览器,在地址栏输入:http://localhost:4000,你会看到Hexo的示例页面。

注:此时可以初始化git本地仓库了,或者是等本地博客搭建好之后也可以。

再探Hexo

  1. 新建文章:

$ hexo new <title>

此时在source_posts文件夹中便会多出一个文档"title.md".
如果要删除,直接在此文件夹下删除对应的文件即可。

  1. 生成静态页面

$ hexo generate

生成的静态内容在public文件夹内。

  1. 清除生成内容

$ hexo clean

执行此操作会删除public文件夹中的内容。

  1. 部署Hexo

$ hexo deploy

该操作会将hexo生成的静态内容部署到配置的仓库中,请看下面介绍。

部署Hexo

  1. 编辑配置文件,关联远程仓库:
    在编辑器中打开Hexo配置文件_config.yml,找到下面内容:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

添加github仓库信息:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:SeayXu/seayxu.github.io.git #github仓库地址
  branch: master # github分支

注意:type、repo、branch的前面有两个空格,后面的:后面有一个空格

  1. 安装git插件

npm install hexo-deployer-git --save

如果没有安装git插件,会有错误提示,安装后重新部署就可以了。

  1. 部署

$ hexo deploy

如果没有意外,部署就成功了,可以打开 http://<用户名>.github.io 查看。

hexo命令缩写

  • hexo g:hexo generate

  • hexo c:hexo clean

  • hexo s:hexo server

  • hexo d:hexo deploy

hexo命令组合

hexo clean && hexo g -s,就是清除、生成、启动
hexo clean && hexo g -d,就是清除、生成、部署

本文简单介绍Hexo的部署,接下来的文章会介绍Hexo的相关配置。

手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置
【Hexo博客交流群】
群号:582271078

原文:手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置

相关推荐