基于Github&Hexo的我的博客搭建过程

时间  2019-12-01
标签 基于 github&hexo github hexo 我的 博客 搭建 过程 栏目 Git 繁體版
原文   原文链接

你们好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......html

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。如今就让咱们一块儿进入 Web 前端学习的冒险之旅吧！前端

1、我的博客的搭建过程

一、常见我的博客搭建方案

搭建我的博客通常有三种方式：node

  • WorkPress：通常须要独立域名（收费），对 MarkDown 不友好
  • GitHubPages + Jekell：免费，稍微有点麻烦
  • GitHubPages + Hexo：免费，使用简单，使用者众多（咱们接下来要介绍的博客的搭建就是基于这种方式。）

二、Hexo简介

Hexo 是一个基于 Nodejs 的静态博客网站生成器，做者是来自台湾的 Tommy Chengit

Hexo官网：https://hexo.io/github

特色：npm

  • 难以想象的快速 ─ 只要一眨眼静态文件即生成完成
  • 支持 Markdown
  • 仅需一道指令便可部署到 GitHub Pages 和 Heroku
  • 已移植 Octopress 插件
  • 高扩展性、自订性
  • 兼容于 Windows, Mac & Linux

3. 博客搭建正式开始

（1）建立一个github仓库：Create a new repository.windows

（2）注意 Respository name 中必定要输入：你的用户名.github.io。其余地方不用修改，而后直接点 ”Create repository“ 按钮完成建立便可。浏览器

（3）本地环境搭建：缓存

  • 安装Git，步骤省略。
  • 安装Nodejs，步骤省略。
  • 安装Hexo，打开官网：
    ​

是否是很简洁，只有一条指令！并且咱们只须要使用windows的cmd就能够下载安装。微信

打开cmd，输入指令：

npm install hexo-cli -g

Hexo安装完成，是否是超简单^_^

四、 建立本地博客

在cmd里面定位到你想保存博客的文件夹（个人位于 G:/Blog/ 目录下）

用cmd定位到这个文件夹下：

以后，使用如下指令建立本地博客：

hexo init 你的用户名.github.io  // 建议和建立仓库时使用同一个，个人是Daotin.github.io

五、 Next主题的安装

通过上面步骤建立完本地博客以后，基本的博客系统就已经搭建好了，自带了 landscape 主题。不过该主题不是很符合个人审美，在网上搜索了一下 Hexo 主题，选择了用户量较大的 Next。

Next 是 iissnan 在 GitHub 上开源的一个 Hexo 主题，主打简洁，可是功能齐全，使用者众多。

”说明：“在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下（即 xxx.github.io 目录下），主要包含 Hexo 自己的配置；另外一份位于主题目录下，这份配置有主题做者提供，主要用于配置主题相关的选项。为了描述方便，在如下说明中，将前者称为 “站点配置文件”， 后者称为 “主题配置文件”。

看下怎么安装Next主题：

cmd 下切换到本地 Daotin.github.io 目录下，以后输入以下指令：

git clone https://github.com/iissnan/hexo-theme-next themes/next

以后咱们就能够在 Daotin.github.io\themes 下看到 next 主题文件夹：

六、使用Next主题

首先，复制一份打开本地博客目录下的 **_config.yml** 文件，命名为 _config.yml.bak，作为备份，以防改错。而后，使用文本编辑器打开本地博客目录下的 _config.yml 文件，搜索，定位 theme 键值，将本来的 theme 的值注释掉，新建一个新的 theme 值为 next.

theme: next

注意：该配置文件中的键值之间必定要有空格，不然轻则没有做用，重则报错，没法启动。

七、 站点配置文件基本项修改

这里先看看最基础的配置，也就是必需要改动的：

title: xxx  # 博客的名字，也称站点名称
author: xxx # 做者名字
description: xxx # 对站点的描述，搜索引擎会抓取，能够自定义（这个仍是加上比较好）
language: zh-Hans # 语言 简体中文
theme: next  # 配置主题
deploy: # 部署相关配置
    type: git # 使用 Git 提交
    repo: https://github.com/Daotin/Daotin.github.io.git # 就是存放博客的仓库地址

上述配置是必需要修改的，再次强调，键值之间必定要 ”加空格“，请在文本编辑器中搜索定位后再修改。

站点配置文件详细配置示例

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 这里的配置，哪项配置反映在哪里，能够参考个人博客
title: xxx # 博客的名字，也称站点名称
subtitle: xxx # 副标题
description: xxx # 对站点的描述，搜索引擎会抓取，能够自定义
author: xxx # 做者名字
language: zh-Hans # 语言 简体中文
timezone:  # 用默认的便可

# URL 
# 这项暂时不须要配置，绑定域名后，要建立 sitemap.xml 时再配置该项
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: # http://xxx.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
# 目录，不要修改
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing 
# 文章布局、写做格式的定义，不修改
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format 
# 日期 / 时间 格式，不要修改
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: MMM D YYYY
time_format: H:mm:ss

# Pagination 
# 每页显示文章数，能够自定义
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions 
# 配置站点所用主题和插件，这里将默认主题注释，修改成 next
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
#theme: landscape

# 头像
# 注意：是 xxx.github.io/source 下的开始的相对路径，若是 source 文件夹下面没有 uploads 文件夹，那么新建一个。考虑到会博客中用不少图片，在 uploads 文件夹下请分好类，避免混乱
avatar: /uploads/images/avatar.jpg

# Deployment 
# 本地博客部署到 github 上要配置这里
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git # 使用 Git 提交
  repository: https://github.com/xxx/xxx.github.io.git # 就是存放博客的仓库地址

下面是我本身的文件详细配置：**Daotin.github.io/_config.yml文件**

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Daotin's Home
subtitle: 说好的幸福呢
description: 天天进步一点点
author: Daotin
language: zh-Hans
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
#theme: landscape

# 头像
# 注意：是 xxx.github.io/source 下的开始的相对路径，若是 source 文件夹下面没有 uploads 文件夹，那么新建一个。考虑到会博客中用不少图片，在 uploads 文件夹下请分好类，避免混乱
avatar: /uploads/touxiang/touxiang.jpg

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/Daotin/Daotin.github.io.git

以上基本本地博客就已经搭建好了，咱们能够先看看效果：

在 cmd 下定位到 xxx.github.io 目录，输入命令：

$ hexo s // hexo server

启动成功能够看到提示，按照提示用浏览器打开提示网址 http://localhost:4000/ ，便可看到你的本地博客了，里面有一篇系统自带的 Hello World 文章.

八、 Next 配置

固然，最权威的是看官方的说明文档，我在这里提供一个示例，供你们参考，你能够直接拷过去稍微改动一点就行。

**Next 配置就是上面所说的”主题配置文件“，位于 xxx.github.io/themes/next 目录下，文件名为 _config.yml。老规矩，先备份一份 ”_config.yml.bak“，以防改错。**

以个人博客为例，阐述一下须要配置的地方：

# Set default keywords (Use a comma to separate)
# 设置关键字
keywords: "Android, DIY"

# Specify the date when the site was setup
# 设置博客开始时间
since: 2017

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
# 设置菜单，就是[个人博客](http://Daotin.github.io)左侧那一列
menu: 
  #home: /
  home: / || home
  archives: /archives/ || archive
  #archives: /archives
  categories: /categories/ || th
  #categories: /categories
  tags: /tags/ || tags
  #tags: /tags
  about: /about/ || user
  #about: /about
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

# Schemes
# 设置风格
#scheme: Muse
#scheme: Mist
scheme: Pisces # 个人就是这个双栏风格

# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true # 设置是否显示阅读全文，文章较多的话，有必要设置为 true
  length: 150

# 一些第三方服务设置，这里只提一下”多说“，其余的请参考官方介绍
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
  ua_enable: true
  admin_enable: true
  user_id: 0 # **这里不要动，千万别动**
  admin_nickname: DIY-green

# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
#highlight_theme: normal
# 代码高亮主题
highlight_theme: night eighties

# 打赏配置
# 打赏说明文本
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创做！
# 微信收款二维码
wechatpay: /uploads/pay/wechatpay.jpg
# 支付宝收款二维码
alipay: /uploads/pay/alipay.jpg

# 订阅微信公众号
# Wechat Subscriber
#wechat_subscriber:
#  enabled: true
#  qcode: /uploads/wechat-qcode.jpg
#  description: 欢迎您扫一扫上面的微信公众号，订阅个人博客！

（PS：在设置菜单这一项，就是个人博客左侧那一列就使用默认的设置就能够了，以前改为了注释的部分，致使菜单栏的图标都变成了问号，谢谢帅张星球的“少年”提醒通过改正，以上。）

9. 建立分类页面

（1）打开命令行，定位到 Daotin.github.io 目录；
（2）新建一个页面，命名为 categories；

hexo new page categories

（3）根据提示找到新建的 index.md 文件，编辑；

---

title: 分类
date: 2017-10-30 20:45:01
type: "categories" # 将页面的类型设置为 categories，主题将自动为这个页面显示全部分类
comments: false    # 若是有启用多说 或者 Disqus 评论，默认页面也会带有评论。须要关闭的话，设置为 false

---

10. 建立标签云页面

以下图：

（1）打开命令行，定位到 Daotin.github.io 目录；
（2）新建一个页面，命名为 tags；

hexo new page tags

（3）根据提示找到新建的 index.md 文件，编辑；

---

title: All tags 
date: 2016-04-27 08:56:40
type: "tags"    # 将页面的类型设置为 tags，主题将自动为这个页面显示标签云
comments: false # 若是有启用多说 或者 Disqus 评论，默认页面也会带有评论。须要关闭的话，设置为 false

---

注意事项

  • 格式再次强调，设置项的键值之间必定要有空格；
  • 菜单上显示 ”分类“ 等栏目。若是须要在菜单上显示 ”分类“ 和 ”标签“ 等，那么记得打开注释，或者添加该条目；
  • 关于第三方服务的 ”duoshuo_info“。在配置该项的时候，user_id 键对应的值不要修改，也就是保持为 0，具体缘由我不清楚，若是修改了该值，那么你的博客会变得一片空白；
  • 分类和标签云页面。首先，要使用” hexo new page “命令生成这两个页面，不然报404。其次，这两个页面是主题自动维护的，只要咱们的文章按照规矩来就好了，下面会详细说明。

二. 写博客与发布

通过上述步骤，本地博客和主题设置已经完成，那么接下来就是写博客了。

你的博客文件须要存放到 **Daotin.github.io/source/_posts 文件夹**中，在该文件夹下面你能够按照你的博客分类创建一系列的文件夹来管理博客原文件。

操做步骤：

一、用 Markdown 写文章

无论你用什么编辑 Markdown 文件，最后生成的 md 文件放到 Daotin.github.io/source/_posts 文件夹或其子文件夹中便可，如：

或者使用指令：

hexo new "xxx"  // xxx 为Markdown文件名，如 xxx.md

/source/_posts文件夹内除了xxx.md文件还有一个同名的文件夹，之后咱们xxx博文须要插入的图片就放到对应的同名文件夹下，方便添加图片与归类。

md文章的内容格式以下：

---

title: 我的博客搭建详解   # 这是标题
categories:            # 这里写的分类会自动聚集到 categories 页面上，分类能够多级
- 实用技术               # 一级分类
- 我的博客               # 二级分类 
tags:                 # 这里写的标签会自动聚集到 tags 页面上
- 实用               # 可配置多个标签，注意格式
- 我的博客

#  下面写正文部分。。。

---

注意：分类和标签是自动维护的，关键是的文章要按照规定的格式写，如上格式，能够参考。
说明：Next 主题会自动生成目录，这也省了很多事。

二、本地运行测试

打开命令行定位到 xxx.github.io 目录，输入命令：

hexo s // hexo server  启动服务预览

三、在浏览器查看效果

在浏览器中输入 http://localhost:4000 访问本地博客，看看效果吧。

四、安装自动部署发布工具

这里用到了 hexo-deployer-git，使用以下命令安装：

npm install hexo-deployer-git --save

五、发布到 GitHub Pages

确认在本地上显示无误以后，就能够将 md 转为 静态网页文件，而后发布到 GitHub Pages 上去了。

hexo clean #清除缓存 网页正常状况下能够忽略此条命令
hexo g     #生成静态网页
hexo d     #开始部署

也能够一次性执行
hexo clean && hexo g && hexo d

若是是第一次部署，终端会提示要求输入用户名和密码。等命令执行完以后，过几分钟打开 http://Daotin.github.io 便可看到你的我的博客了。之后要发布新文章，执行上述命令便可。

注意事项

  • Git 的 bug
    有个老版本的 Git 有个 bug，上传的时候会提示非法域名这类的，要解决该问题，最简单的方法就是更新 Git，用最新版的 Git；

  • 关于页面空白
    主题配置文件中的 ”duoshuo_info“ 下的 ”user_id“ 若是是非 ”0“，会致使该问题

  • 特殊字符致使报错
    如添加新博客的时候报错了，并且提示的是 js 中某些地方报错，那么极可能是 md 文件中存在特殊字符（不是正常显示的字符，不是说特殊符号，能正常显示的都不是这里说的特殊字符），把特殊字符删除便可

  • 使用hexo，若是换了电脑怎么更新博客？
    这个问题相信你们都关心，知乎上有比较详细的解答。我说一下个人解决方法吧！
    ​
    在新电脑上配置好本地博客环境，而后，直接拷贝原电脑上的 xxx.github.io 文件夹到新电脑上便可。
    将 xxx.github.io 文件夹同步到网上(如：Dropbox 等)，其余任何电脑（配置好了本地博客环境）要用的时候，从网上同步下来便可。

3、参考资料

免费我的博客搭建详解

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程