Mac平台下使用Hexo+Github搭建博客流程

本文记录的是在 Mac 环境下搭建“Hexo+Github”博客流程

第一步:Github 环境搭建

  1. 首先申请 Github 账号

  2. 登陆已经申请的 Github 账号

    1. 点击右上角的“+”图标,创建一个新仓库 。
      创建仓库

    2. Repository name 输入 userName.github.io,其中 userName 是 Github 上的账户名称,仓库名称格式必须这样填写,否则无法部署博客;随后点击 Create repository 按钮提交即可。
      填写仓库信息

    3. 仓库创建成功后,会有一个有一个 SSH 地址,形如 git@github.com:userName/userName.github.io.git
      SSH 地址

第二步、添加 SSH 公钥

  1. 使用 ssh-keygen 命令生成key pair,生成成功后,会在 ~.ssh 目录下生成密钥文件:私钥 id_rsa公钥 id_rsa.pub

    1
    $ ssh-keygen -t rsa -C "email"

    其中 -t rsa 表示使用密钥的加密类型,还可以为dsa;-C 设置注释文字,比如你的邮箱“YourEmail”,不一定要是github注册邮箱

    创建公钥
    公钥信息

  2. 为 github 用户添加 SSH 公钥

    添加公钥

  3. 至此,Github 环境已搭建完成

第三步:本地环境配置

  1. 安装 HomeBrew

    1
    $ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    HomeBrew 是一个非常有用的软件包管理系统,类似于Linux下的apt-get

  2. 安装 Git

    1
    $ sudo brew install git
  3. 安装 Node.js

    前往 Node.je官网下载 Node.js pkg 安装包,双击安装即可

  4. 安装 hexo

    1
    $ npm install -g hexo-cli

    -g–global 表示全局安装模块,如果没有这个参数,会安装在当前目录的node_modules子目录下。

第四步、配置 hexo

  1. 初始化 Hexo

    1
    $ hexo init userName.github.io

    其中 userName.github.io 为本地文件夹的名字(可以随便起)。

    安装成功如图:

  2. 安装依赖包

    1
    2
    $ cd userName.github.io
    $ npm install

    其中 npm install 表示安装当前目录package.json文件中配置的dependencies模块。

    至此,最基本的本地 hexo 博客已经搭建好了,可以本地查看:

    1. 生成静态网页

      1
      $ hexo generate
    2. 启动服务

      1
      $ hexo server
    3. 然后到浏览器输入 http://localhost:4000/看看初步效果:
      Hexo效果

第五步、定制 hexo 信息和主题

  1. 安装Next主题,这是一个比较受欢迎的 hexo 主题,目前 github 上有 7392个 start

    1
    2
    $ cd userName.github.io
    $ git clone https://github.com/iissnan/hexo-theme-next themes/next
  2. hexo 基础定制:编辑文件

    1
    $ vi ~/userName.github.io/_config.yml

    编辑相关内容:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Site
    title: shenyuanluo的博客 # 博客标题
    subtitle: 子标题 # 博客子标题
    description: 记录学习的点点滴滴 # 博客简介
    author: shenyuanluo # 博客作者
    language: zh-Hans # 博客语言:中文(默认是英语)
    theme: next # 博客主题
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
    type: git # 使用 Git 发布
    repo: https://github.com/username/username.github.io.git # 刚创建的Github仓库
    branch: master

Hexo站点设置

Hexo部署设置

第六步:编写博客

  1. ~/userName.github.io/source/_posts下创建博客,如创建一个名为MyFirstHexo.md的文件,

    1
    hexo new "MyFirstHexo"

    此命令会在 _posts 目录下会生成文件 MyFirstHexo.md

  2. 编辑文件内容

    1
    2
    3
    4
    5
    6
    ---
    title: MyFirstHex
    date: 2017-04-03 15:47:12
    tags: [标签1,标签2] #文章标签,多于一项时用这种格式
    ---
    ## 这是我的第一篇博客文章,用于测试 Hexo 博客!
  1. 在本地测试看下效果

    1
    2
    $ hexo generate
    $ hexo server
  1. 安装hexo-deployer-git自动部署发布工具

    1
    $ npm install hexo-deployer-git --save

第七步:发布到 github.io

  1. 输入如下命令

    1
    2
    3
    $ hexo clean
    $ hexo generate
    $ hexo deploy
  2. 如果出现 INFO Deploy done: git 说吧发布成功

    成功发布

hexo的目录结构

1
2
3
4
5
6
7
8
9
10
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json

全局配置 _config.yml

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
# Hexo Configuration
# Docs: http://hexo.io/docs/configuration.html
# Source: https://github.com/hexojs/hexo/
# Site #站点信息
title: #标题
subtitle: #副标题
description: #站点描述,给搜索引擎看的
author: #作者
email: #电子邮箱
language: zh-CN #语言
# URL #链接格式
url: #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
enable: true #是否启用
line_number: true #显示行号
tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数,设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论,替换为多说
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署,
deploy:
type: git
repo: 刚刚github创库地址.git
branch: master

注意

1
配置文件的冒号“:”后面有一个空格

Hexo常用命令:

1
2
3
4
5
6
7
8
hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页,可以在 public 目录查看整个网站的文件
hexo server #本地预览,'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存,**强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹**

Hexo常用命令简写:

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

参考资料

  1. 手把手教你建github技术博客by hexo
  2. 5分钟 搭建免费个人博客
------ 本文结束 ------
欣赏此文?求鼓励,求支持!