美文网首页
Hexo + Github Pages, 创建个人博客

Hexo + Github Pages, 创建个人博客

作者: lilylee_ | 来源:发表于2017-08-11 21:34 被阅读0次

前言

想要有一个自己的博客,拿来记平时的笔记。但是又不想去博客平台注册账号,平台那么多,选择也是件让人头大的事情。又不想自己买服务器专门搭建一个博客服务。怎么办呢,用Hexo + Github Pages,就可以很容易的拥有一个自己的博客了。

简介

Hexo是一款Node.js开发的博客框架。它快速、简洁、高效,支持Markdown语法,是一款简单易用的博客框架。既可以部署到自己的服务器,又可以生成静态资源文件,放在Github Pages当作个人博客使用,无需自己买服务器部署。

Github Pages支持创建自己的静态页面,并提供Github的二级域名访问。

安装和使用

Node.js + npm

安装Node.js和npm请详见Node.js官网Hexo官网也有相关的介绍说明。这里我们从Hexo的安装开始介绍。

Git

因为我们使用 Github Pages 服务做博客,所以 git 是必须安装的。
如果没有安装的话,去 git 官网下载安装即可。
mac 可以直接用 brew install git 命令安装。
Git 的使用教程不再此文范围内,所以不做介绍。推荐官网手册廖雪峰的Git学习教程。廖大神写了对Git的介绍到安装到使用详细且易懂的教程。

Hexo

安装Hexo
$ sudo npm install hexo-cli -g
用Hexo创建一个博客项目
$ hexo init <blog-folder>
启动博客服务

hexo init 创建好项目之后,进入项目目录cd <blog-folder>
然后输入命令hexo server 或者 hexo s便可以启动博客服务。

$ hexo server

启动成功后有提示:

INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

浏览器访问 http://localhost:4000便可以看到博客页面了。

创建一篇文章
$ hexo new <filename>

此命令执行完之后,会在生成 source/_posts/filename.md 文件。用编辑器打开文件,开始编辑文档内容,这便是博客文档的编辑了。推荐使用 Markdown 语法

创建一个页面
$ hexo new page <page-folder-name>

此命令执行完之后,会在生成 source/<page-folder-name>/index.md 文件。

Next主题安装

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

关于博客主题,博主选了很久决定用 Next,简洁大方不花哨。
这里给一个其他主题介绍的传送门:

  1. 我是知乎的传送门,请点我
  2. 我是 github 的传送门,请点我

配置

Hexo 配置

Hexo的配置文档为 _config.yml
这里介绍几个主要的配置项:

Site基本信息配置:
# Site
title: 你的博客的名字
subtitle: 你的博客的subtitle
description: 你的博客的描述
author: 你的名字
language: zh-Hans # 语言,默认是en。这个是简体中文
timezone: 时区 # 默认是电脑的时区
favicon: /favicon.ico  # 把favicon.ico文件拷贝至source下,这个默认的路径。
avatar: /avatar.jpg # 把你的头像图片拷贝到source目录下。名字你自己定。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 你的 Github Pages 访问地址。
博客主题配置:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next # 配置你的主题为 next
博客部署配置项:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git # 我们要用 Github Pages,所以这里 type 为 git
  repo: 你的 github repository 的地址 # 查看code,有一个绿色的 clone or download, 我选的是https
  branch: master

点击这里可以带你去Hexo官方的配置文件介绍

Next 配置

Next的配置文档为 themes/next/_config.yml
同样这里只介绍介个主要的配置项:

menu 设置
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories/ # 启用分类
  tags: /tags/ # 启用标签
  archives: /archives/ # 启用归档, hexo 按时间归档
  about: /about/ # 启用关于

要启用这些 menu,需要 hexo 创建好这几个 page:

$ hexo new page categories # 生成 source/categories/index.md
$ hexo new page tags # 生成 source/tags/index.md
$ hexo new page about # 生成 source/about/index.md

archives是 hexo 会默认有的

创建好之后这些page后,需要对tags和categories下的index.md稍作修改

source/categories/index.md:
---
title: categories
date: 2017-08-11 16:49:50
type: "categories"
comments: false
---

source/tags/index.md: 
---
title: tags
date: 2017-08-11 16:49:50
type: "tags"
comments: false
---

修改scaffolds/post.md, 添加上

tags:
categories:

这两项,然后用 hexo new 创建文章后,在tags: 后添加 tag,在 categories: 后添加分类,就行了。单个 tag 或 分类,可以直接写,如果是多个的话,写成[a,b,c]这种形式。

博客样式设置
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

Next官方给出了四种可选方案,博主把这四个都试了一遍,决定用第四个,Gemini。启用的方式就是去掉注释,把不要的注释掉。

文章折叠
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

默认是显示全文的。官方给出两个解决方案,一个是将 auto_excerpt 里的 enable 设置为 true。但是这种方式不推荐,会将你文章的格式去掉。官方推荐的做法是,在你文档中想要折叠提示"阅读全文"的地方加上

<!--more-->
开启文章版权声明
# Declare license on posts
post_copyright:
  enable: true # 把这个项设置为true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

开启之后,会在每一篇文章中显示版权声明。

开启social network links
# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social: # 去掉这里的注释
  #LinkLabel: Link
  GitHub: 你的github主页地址

博主只加了github主页地址。其他的参见配置文档的说明。

点击这里可以带你去Next官方的主题设置教程

创建 Github Pages

首先要有一个 Github 账号。然后创建一个 repository。你可以在 Github 上看到 绿色的 new repository

点击之后进入创建页面:

取一个名字,勾选 Initialize this repository with a README,然后点击绿色的创建。

创建完之后,到 Settings 选项:

到 Github Pages 那一项去:

选择 master branch ,然后点击 save。然后你会看到一个你 Pages 主页的地址。这就是你以后的博客访问地址了。

部署至 Github Pages

前面配置章节讲了如何配置 Hexo 的 repo,所以这时候,当我们准备好时,先执行 hexo clean 清掉之前的数据和页面,再执行 hexo generate 生产新的页面, 最后执行部署命令 hexo deploy,便成功部署到了 Github Pages。
即:

$ hexo clean
$ hexo generate
$ hexo deploy

Github Pages 有短时间的缓存,所以稍等片刻,访问我们的 Github Pages 页面,就可以看到博客页面啦。

尾声

至此,我们便成功拥有了一个属于自己的博客。
可以将博客项目提交到 Github 管理,作为自己的博客备份,这样在可以使用网络和电脑的地方我们都可以方便的写博客了。

此外,除了 Github 提供 Pages 这样的服务,国内的 Coding 也提供有 Coding Pages 可以用哦。

点此查看我的个人博客

相关文章

网友评论

      本文标题:Hexo + Github Pages, 创建个人博客

      本文链接:https://www.haomeiwen.com/subject/xbmrrxtx.html