Hexo Blog 搭建步骤 (For Serena)

Hexo Blog 搭建步骤 (For Serena)

三月 28, 2019

  简要介绍Hexo Blog搭建步骤，包括PC环境配置、博客主题设置、文章编写方式等，技术小白也很容易搭建，耐心看，不难(0.0)

注意：以下命令均在终端中输入，Mac按command+空格 输入ter回车，即可打开终端了。

Step1. PC环境配置

Hexo安装

首先什么是Hexo呢？
  Hexo 是一个快速、简洁且高效的博客框架, Hexo 使用 Markdown（或其他渲染引擎）来编辑和解析文章，不需要从头开始编写网页，仅需要敲几行命令以及简单设置即可搭建博客。

  点我：Hexo安装指南

那什么是Markdown呢？
  Markdown ，2004年由 John Gruberis 设计和开发，是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式，即不同字体大小，粗体，斜体，颜色，文字居中，段落行距，插入链接，插入图表等等。

  Markdown语法介绍
  Markdown进阶设定

  然而，还有更方便的Markdown编辑器，可以像Word一样去编辑Markdown文档，这里我推荐小书匠编辑器。

配置SSH

  由于需要在自己的PC机上，将写好的网页上传到GitHub，但是上传代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。

1
$ cd ~/. ssh

  如果提示：No such file or directory 说明你是第一次使用git

1
ssh-keygen -t rsa -C "e-mail url"

  然后连续3次回车，最终会生成一个文件在用户目录下，打开用户目录，找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key：
enter description here

  测试是否成功

1
$ ssh -T git@github.com # 注意邮箱地址不用改

  如果提示Are you sure you want to continue connecting (yes/no)?，输入yes，然后会看到：
Hi yourname! You’ve successfully authenticated, but GitHub does not provide shell access.
看到这个信息说明SSH已配置成功！
  此时你还需要配置：

1
2
$ git config --global user.name "liuxianan"// 你的github用户名，非昵称
$ git config --global user.email  "xxx@qq.com"// 填写你的github注册邮箱

简单测试

  安装完hexo后
  启动本地服务，进行文章预览调试

1
hexo s --debug //hexo service --debug也可以

  生成静态页面

1
hexo g //hexo generate也可以

  部署网页至Github

1
hexo d //hexo deploy也可以

Step2. 博客主题安装

  hexo提供了很多博客主题，都是由世界各地的网友贡献的，可以根据喜好自己选择。
  点我：hexo博客主题

  本博客使用的主题是diapora，是一个极简风格的主题，适合喜欢摄影，影评，乐评和玩弄文字的你。

  diapora主题-Github链接

安装命令

1
2
cd ~/your-hexo-path/themes
git clone https://github.com/Fechin/hexo-theme-diaspora.git diaspora

启用主题

  修改Hexo配置文件 _config (hexo第一层目录下的).

  主题项设置为diaspora.

1
theme: dispora

新建文章模板

  所有的文章均存储在~/your-hexo-path/source/_posts路径中，文件以.md为后缀存储

  使用小书匠编辑器编写即可，下面是文章头部模板

1
2
3
4
5
6
7
8
9
10
11
12
---
title: My awesome title
date: 2016-10-12 18:38:45
categories: 
    - 分类1
    - 分类2
tags: 
    - 标签1
    - 标签2
mp3: http://domain.com/awesome.mp3
cover: http://domain.com/awesome.jpg
---

  其中mp3后添加文章背景音乐链接，cover后添加图片链接.

音乐外链转换

  点我：音乐外链转换工具
  可将任意音乐平台的音乐链接转换为可播放的链接.
  如下图，首先复制网易云音乐的链接.
enter description here
  然后粘贴至转换工具中，点击提交，生成的链接可以直接使用.
enter description here
  音乐链接设置好了之后可以点击blog页面左上角的播放键播放，也可以在下面的主题配置文件中设定为自动播放.

主题配置

  修改主题配置文件 _config
  (Path: ~/your-hexo-path/themes/dispora/)

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
# 头部菜单，title: link
menu:
  Whoami: /whoami
  Github: https://github.com/Fechin
  Twitter: https://twitter.com/FechinLi
  分类: /categories
  归档: /archives
  标签云: /tags
# 是否显示目录
TOC: false
# 是否自动播放音乐
autoplay: false
# 默认音乐（随机播放）
mp3: 
    - http://link.hhtjim.com/163/425570952.mp3
    - http://link.hhtjim.com/163/425570952.mp3
# 首页封面图, 为空时取文章的cover作为封面
welcome_cover: # /img/welcome-cover.jpg
# 默认文章封面图
cover: /img/cover.jpg
# Gitalk 评论插件（https://github.com/gitalk/gitalk）
gitalk:
    # 是否自动展开评论框
    autoExpand: false
    # 应用编号
    clientID: ''
    # 应用秘钥
    clientSecret: ''
    # issue仓库名
    repo: ''
    # Github名
    owner: ''
    # Github名
    admin: ['']
    # Ensure uniqueness and length less than 50
    id: location.pathname
    # Facebook-like distraction free mode
    distractionFreeMode: false
# 网站关键字
keywords: Fechin
# 要使用google_analytics进行统计的话，这里需要配置ID
google_analytics: 
# 网站ico
favicon: /img/favicon.png
# rss文件
rss: atom.xml


Good Luck (*￣(oo)￣)
Author：北
  1. 1. Step1. PC环境配置
    1. 1.1. Hexo安装
    2. 1.2. 配置SSH
    3. 1.3. 简单测试
  2. 2. Step2. 博客主题安装
    1. 2.1. 安装命令
    2. 2.2. 启用主题
    3. 2.3. 新建文章模板
    4. 2.4. 音乐外链转换
    5. 2.5. 主题配置