Author Email
Yaoyao Liu yaoyaoliu@msn.com

前言

对于广大CS专业的学生和码农,找一个地方写博客,记录一些编程、配置环境、阅读论文的心得体会是一个很常见的习惯。当然想搭建个人博客,就需要找个靠谱的平台,主要就是以下的两种方式:

  • 使用网站提供的博客平台,例如国内的CSDN、博客园;国外的Blogger、Wordpress
  • 自己建站,发布到自己的服务器上,或者发布到GitHub、GitLab、Bitbucket等支持静态网页发布的git平台

针对于第一种方式,最大的特点就是省心。CSDN和博客园都支持多种编辑器,其中就包括Markdown。而且基本上不需要任何设置,注册个账号直接写文章就可以了。缺点是国内的这些平台都不支持使用自有域名,而且在海外访问速度也不快,有些平台还有广告。国外的平台,blogger支持自有域名,但是很多设置都不太好用,而WordPress很多功能是收费的。而且这两个平台好像在国内无法访问。总而言之,就是使用别人家的平台,可以改的东西就会比较少,受到的限制也很多。

所以许多人就选择了第二种方式。第二种方式也有很多选择。比如hexo、jekyll,而且WordPress也提供开源安装包可以部署在自己的服务器上。相对于自己购买服务器,我更倾向于使用GitHub、GitLab这些支持Pages服务的平台。原因很简单,自己买服务器首先就要花钱,而且在各种网络条件下链接速度也不好保证。GitHub Pages服务虽然有容量上限,但对于博客而且基本等于没有。有着良好的CDN,全世界访问起来都很快。而且支持绑定自有域名,提供SSL认证实现https。最重要的是,所有的服务都是免费的。

使用GitHub Pages服务搭建博客,主要就是hexo和jekyll两个平台。这两个平台都支持Markdown,这一点是最重要的。GitHub Pages服务官方支持的是jekyll,所以jekyll可以在不进行设置的情况下实现CI/CD(持续集成Continuous integration和持续发布 Continuous delivery)。简单来说就是不进行任何配置的情况下直接把Markdown和jekyll的源文件git push到服务器上,网站就会自动编译和发布出来。hexo也支持CI但要进行配置。

但是,很多用户都反映jeyll速度不如hexo。而且我个人觉得hexo主题管理方面是要优于jekyll了,好看的主题也更多。所以本文介绍hexo+GitHub搭建博客。

下载安装hexo

hexo官网提供了良好的开发文档,并且提供了简体中文的版本。其实安装过程参照官网一步步来就没有什么问题。本文也以ubuntu为例简述一下安装配置过程。其他Unix内核的系统比如Debian、macOS过程也很类似。

首先需要安装npm:

sudo apt-get install python-software-propertie
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install nodejs

检查npm的版本,如果能正常显示版本号则安装成功:

npm -v

安装完npm,就可以安装hexo了:

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo s

然后访问http://localhost:4000,如果显示正常,就说明hexo已经安装完成。

这里提供一些hexo的命令,你也可以在官方帮助文档里面找到更全面的命令清单。

npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客 hexo n "new post" == hexo new "new post" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署 hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

将项目部署到GitHub

首先在GitHub新建一个空的Repository,名字为your-username.github.io(把your-username替换为你的用户名),这样GitHub会自动将网页发布到your-username.github.io

git@github.com:y2l/y2l.github.io.git

打开_config.yml 文件,找到deploy,进行如下配置:

deploy:
type: git
repo: git@github.com:y2l/y2l.github.io.git
branch: master

然后执行:

npm install hexo-deployer-git --save
hexo clean
hexo g
hexo d

这样生成的静态网页就被推送到GitHub上了。

然后你需要在GitHub对应的Repository的settings界面上(https://github.com/your-username/your-username.github.io/settings),在GitHub PagesSource设置中,选择master branch并点击save。这样,几分钟之后你的网页就被发布了。

绑定自己的域名

选择域名注册上并注册域名可以参考:域名注册与域名解析

配置域名给GitHub Pages可以参考《通过Github实现URL转发》中配置域名的相关部分。

GitHub可以免费提供SSL认证,实现https,在settings中可以一键开启。

要注意的是,如果使用自己的域名,你需要在source目录下创建一个名为CNAME的文档,在其中输入你的域名。如果不建立这个文档,每次部署的时候GitHub Pages的域名配置都会被清空。

配置和使用NexT主题

之所以使用hexo搭建博客,就是为了使用hexo所支持的大量主题。这里就像大家介绍一个界面干净整洁,很多hexo博客都使用的主题:NexT。这个主题提供良好的中文开发文档。而且功能齐全,一个博客需要有的功能,比如标签、分类、背景设置、分享、评论功能、计数器、Google Analytics等等很多功能都被集成进去,可以说是非常好用。

安装NexT

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

然后修改站点配置文件_config.yml, 找到 theme字段,并将其值更改为 next

theme: next

到此,NexT 主题安装完成。

然后执行如下命令查看效果:

hexo clean
hexo s

基本信息配置

基本信息包括:博客标题、作者、描述、语言等等。

打开 站点配置文件 ,找到Site模块

title: 标题
subtitle: 副标题
description: 描述
author: 作者
language: 语言(简体中文是zh-Hans)
timezone: 网站时区(Hexo 默认使用您电脑的时区,不用写)

关于 站点配置文件 中的其他配置可参考站点配置

菜单设置

菜单包括:首页、归档、分类、标签、关于等等

我们刚开始默认的菜单只有首页和归档两个,不能够满足我们的要求,所以需要添加菜单,打开 主题配置文件 找到Menu Settings

menu:
home: / || home //首页
archives: /archives/ || archive //归档
categories: /categories/ || th //分类
tags: /tags/ || tags //标签
about: /about/ || user //关于
#schedule: /schedule/ || calendar //日程表
#sitemap: /sitemap.xml || sitemap //站点地图
#commonweal: /404/ || heartbeat //公益404

看看你需要哪个菜单就把哪个取消注释打开就行了;

关于后面的格式,以archives: /archives/ || archive为例:

|| 之前的/archives/表示标题“归档”,关于标题的格式可以去themes/next/languages/zh-Hans.yml中参考或修改

||之后的archive表示图标,可以去Font Awesome中查看或修改,Next主题所有的图标都来自Font Awesome。

Next主题样式设置

我们百里挑一选择了Next主题,不过Next主题还有4种风格供我们选择,打开 主题配置文件 找到Scheme Settings

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

侧栏设置

侧栏设置包括:侧栏位置、侧栏显示与否、文章间距、返回顶部按钮等等

打开 主题配置文件 找到sidebar字段

sidebar:
# Sidebar Position - 侧栏位置(只对Pisces | Gemini两种风格有效)
position: left //靠左放置
#position: right //靠右放置 # Sidebar Display - 侧栏显示时机(只对Muse | Mist两种风格有效)
#display: post //默认行为,在文章页面(拥有目录列表)时显示
display: always //在所有页面中都显示
#display: hide //在所有页面中都隐藏(可以手动展开)
#display: remove //完全移除 offset: 12 //文章间距(只对Pisces | Gemini两种风格有效) b2t: false //返回顶部按钮(只对Pisces | Gemini两种风格有效) scrollpercent: true //返回顶部按钮的百分比

头像设置

打开 主题配置文件 找到Sidebar Avatar字段

# Sidebar Avatar
avatar: /images/header.jpg

这是头像的路径,只需把你的头像命名为header.jpg(随便命名)放入themes/next/source/images中,将avatar的路径名改成你的头像名就OK啦!

RSS设置

先安装 hexo-generator-feed 插件

npm install hexo-generator-feed --save

打开 站点配置文件 找到Extensions在下面添加

# RSS订阅
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '

打开 主题配置文件 找到rss,设置为

rss: /atom.xml

添加分类模块

新建一个分类页面

hexo new page categories

你会发现你的source文件夹下有了categorcies/index.md,打开index.md文件进行如下设置

---
title: 分类
type: "categorcies"
comments: false
---

打开 主题配置文件 找到menu,将categorcies取消注释

把文章归入分类只需在文章的顶部标题下方添加categories字段,即可自动创建分类名并加入对应的分类中, 如:

title: 分类测试文章标题
categories: 分类名

添加标签模块

新建一个标签页面

hexo new page tags

你会发现你的source文件夹下有了tags/index.md,打开index.md文件,进行如下设置:

---
title: 标签
type: "tags"
comments: false
---

打开 主题配置文件 找到menu,将tags取消注释

把文章添加标签只需在文章的顶部标题下方添加tags字段,即可自动创建标签名并归入对应的标签中

举个栗子:

title: 标签测试文章标题
tags:
- 标签1
- 标签2
...

添加关于模块

新建一个关于页面

hexo new page about

你会发现你的source文件夹下有了about/index.md,打开index.md文件即可编辑关于你的信息,可以随便编辑。 打开 主题配置文件 找到menu,将about取消注释,该页面就能够正常显示。

添加搜索功能

安装 hexo-generator-searchdb 插件

npm install hexo-generator-searchdb --save

打开 站点配置文件 找到Extensions在下面添加

# 搜索
search:
path: search.xml
field: post
format: html
limit: 10000

打开 主题配置文件 找到Local search,将enable设置为true

添加阅读全文按钮

因为在你的博客主页会有多篇文章,如果你想让你的文章只显示一部分,多余的可以点击阅读全文来查看,那么你需要在你的文章中添加

<!--more-->

后记

至此你的博客就算简单的配置完成了。hexo的NexT主题还集成了评论、分享等众多第三方插件,大家今后还可以慢慢开发。写博客不是做网站,如果你希望建立一个有价值的博客,还应该更加重视博客的内容。hexo给我们提供了一个良好的平台,也希望大家都能多多分享自己的经验和见解。

参考文献

GitHub+Hexo 搭建个人网站详细教程

Hexo的Next主题详细配置

NexT使用文档

使用hexo+GitHub搭建个人博客的心得(含教程)的更多相关文章

  1. 《Hexo+github搭建个人博客》

    <Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+g ...

  2. 使用Node.js+Hexo+Github搭建个人博客(续)

    一.写在前面 在我的上一篇博客<使用Nodejs+Hexo+Github搭建个人博客>中,已经介绍了如何使用 Hexo 在 Github Pages 上搭建一个简单的个人博客.该篇博文将在 ...

  3. Mac上基于hexo+GitHub搭建个人博客(一)

    原文地址: http://fanjiajia.cn/2018/11/23/Mac%E4%B8%8A%E5%9F%BA%E4%BA%8Ehexo+GitHub%E6%90%AD%E5%BB%BA%E4% ...

  4. 如何用hexo+github搭建个人博客

    搭建环境 1.安装 Node.js: https://nodejs.org/en/ windows下点击链接,下载安装即可;Linux下更加简单,在终端下输入sudo apt-get install ...

  5. Ubuntu+Hexo+Github搭建个人博客

    Ubuntu+Hexo+Github搭建个人博客 目录 目录 目录 1. 简介 环境 2. Git安装及配置 2.1 安装Git 2.2 创建Git仓库 2.3 配置git仓库 2.4 添加公钥 3. ...

  6. hexo+github搭建个人博客

    最近用hexo+github搭建了自己的个人博客-https://liuyfl.github.io,其中碰到了一些问题,记录下来,以便查阅. hexo+github在win7环境下搭建个人博客:hex ...

  7. Hexo + GitHub 搭建个人博客

    对于程序员来说,搭建和维护一个个人博客十分必要​,写博客既是对所学知识的整理和总结,同时也能向他人展现自己的学习成果.这篇教程就是基于 Hexo 和 GitHub 来搭建属于自己的个人博客,简单快捷, ...

  8. 使用Node.js+Hexo+Github搭建个人博客

    一.为什么要花时间去搭建个人博客? 首先说说为什么我想要尝试着去搭建属于自己的Blog,古人云:“好记性不如烂笔头”.一开始我把笔记做在本子上.电脑上,发现要用的时候特别地不方便,而且越记越多.越多越 ...

  9. 【教程向】——基于hexo+github搭建私人博客

    前言 1.github pages服务生成的全是静态文件,访问速度快: 2.免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 3.可以随意绑定自己的域名,不仔细看的话根本看 ...

随机推荐

  1. jvm 性能监控与linux常用命令

    linux日常的运维 .Java开发 管理监控命令  ,较为浅显,欢迎提意见,我将在后面持续补充.

  2. C#获取刚插入的数据的id

    在开发程序中我们经常会遇到两个表或多个表关联同时插入数据的需求. 那么我们刚给主表插入一条数据,接着给副表插入数据时其中一个字段要存储与主表关联的id,那么我们该怎么获取刚插入的那条数据的id呢?   ...

  3. RF:connecting to multiple databases

    Hello, I am trying to connect to multiple databases with DatabaseLibrary but its not working. *** Se ...

  4. Day 18:SequenceInputStream、合并切割mp3、对象输入输出流对象

    SequenceInputStream用例题讲述用法 需求:1.把a.txt与b.txt 文件的内容合并 2.把a.txt与b.txt .c.txt文件的内容合并 import java.io.Fil ...

  5. windows操作

    5.windows激活 数字权利许可工具激活 https://jingyan.baidu.com/article/9113f81b4d49232b3314c75e.html 4.网络连接不上 原因,v ...

  6. 使用IDEA打对应结构的Jar包

    发布环境的内容和自己项目默认打包的样式不一样,就需要自定义打印jar包内容. 1.打开右上角项目结构 2.进行图片相关设置 3.直接进行打包,包会出现在class文件里面.解压软件解压开就是自己想要的 ...

  7. Nim游戏(尼姆博弈)

    这里是尼姆博弈的模板,前面的博弈问题的博客里也有,这里单列出来. 有N堆石子.A B两个人轮流拿,A先拿.每次只能从一堆中取若干个,可将一堆全取走,但不可不取,拿到最后1颗石子的人获胜.假设A B都非 ...

  8. vue组件化应用构建

    组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: 在 Vue 里,一个组件本质上是 ...

  9. jquery ajax常用的登录登出

    整理jquery+ajax的登录登出方法. //登录 var currentUserId = -1; $(function() { var timestamp = (new Date()).value ...

  10. 每天一点点之数据结构与算法 - 应用 - 分别用链表和数组实现LRU缓冲淘汰策略

    一.基本概念: 1.什么是缓存? 缓存是一种提高数据读取性能的技术,在硬件设计.软件开发中都有着非广泛的应用,比如常见的CPU缓存.数据库缓存.浏览器缓存等等.   2.为什么使用缓存?即缓存的特点缓 ...