个人博客折腾之旅

搭建本博客涉及到以下技术或工具,请知悉。

  1. Github Page——是Github提供的一种免费的静态网页托管服务,可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo等 编译静态资源。
  2. HexoHexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
  3. NextHexo 是高效的静态站点生成框架,她基于 Node.js。 通过 Hexo 你可以轻松地使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的 标签插件 来快速的插入特定形式的内容。

1.本地搭建Hexo框架

1, 本地配置Git和NodeJS

安装Git——一个分布式版本控制系统,用于项目的版本控制管理。对于Git的使用,可以学习一下廖雪峰的Git教程

  • windows:下载并安装git
  • Mac:使用Homebrew, MacPorts :brew install git 或下载安装程序安装。
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

命令行输入以下命令查看git版本号:

git –version

如果正确显示版本号,则安装成功。
对于windows用户,由于众所周知的原因从上面的链接下载git for windows最好挂上一个代理,否则下载速度十分缓慢。也可以参考这个页面,收录了存储于百度云的下载地址。

安装NodeJS——Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 Hexo是基于Node.JS驱动的一款博客框架。
安装Node.js的最佳方式是使用nvm

cURL:
$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh
Wget:
$ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh
安装完成后,重启终端并执行以下命令即可安装Node.js。
$ nvm install stable

或者也可以下载安装程序来安装。
命令行输入以下命令查看Node.js版本号:

node -v

如果正确显示版本号,则安装成功。
对于windows用户,建议使用安装程序进行安装,并在安装时,勾选Add to PATH选项。
还可以使用Git Bash,这是git for windows自带的一组程序,提供了Linux风格的shell,在该终端下,可以使用上述命令安装Node.js。在任意位置单击右键,选择Git Bash Here即可打开。由于Hexo的很多操作涉及到命令行,所以推荐使用Git Bash操作。

2. 安装Hexo

上述环境搭建成功之后,我们就可以使用npm安装Hexo。在命令行或者Git bash输入已下命令:

$ npm install -g hexo-cli

命令行输入以下命令查看Hexo框架的版本号:

hexo -v

如果正确显示版本号,则安装成功。
注意:由于众所周知的原因,国内使用npm的官方镜像源速度会很慢,甚至连接不上。建议使用国内的淘宝镜像源

设置npm源为淘宝镜像
npm config set registry http://registry.npm.taobao.org/
还原为官方镜像源
npm config set registry https://registry.npmjs.org/

以后就可以使用cnpm命令替换npm命令。

3. 配置博客本地仓库

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init
​$ cd
$ npm install

folder即为本地博客存放的文件夹。
创建完成后,此文件夹的目录结构如下:

├── _config.yml # 网站的配置信息,您可以在此配置大部分的参数。
├── package.json
├── 文本文档
├── scaffolds # 模版文件夹
├── source # 资源文件夹,除 posts 文件,其他以下划线开头的文件或者文件夹不会被编译打包到public文件夹
| └── _posts # 文章Markdowm文件
└── themes # 主题文件夹

本地预览博客效果:
运行hexo s命令,其中s是server的缩写,在浏览器输入http://localhost:4000 预览博客效果。默认使用的主题是landscape。你可以更换你喜欢的主题。

至此,你本地的博客就已经成功搭建了,下面就是将其部署到Github Page上了。

2. 配置Github Page

1. 注册Github

首先如果你还没有 Github 账号,需要先注册一个。
注册完成之后,在官方的引导页面点击Start a project或者下面的new repository新建一个仓库。需要注意的是,Github 仅能使用一个同名仓库的代码托管一个静态站点。所以,你创建的用来作为Github page的仓库的名称必须为用户名.github.io。
然后打开仓库,创建一个index.html文件。
在浏览器访问http://你的用户名.github.io 就可以看到刚创建的index.html网页效果。

2. 配置SSH key

要使用git工具将本地博客部署到GithubPage上,需要配置一下SSH key。git bash中输入以下命令:

//全局配置本地账户
git config –global user.name “用户名”
git config –global user.email “邮箱地址”
//生成密钥
ssh-keygen -t rsa -C ‘上面的邮箱’

按照提示完成密钥的生成。通过查看本地~/.ssh/id_rsa.pub 文件内容,获取到你的 SSH key。
首次使用,还需要确认并添加主机到本地SSH可信列表。git bash执行以下命令:

ssh -T git@github.com

若返回 Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 内容,则证明添加成功。
最后,我们还需要在github上添加刚刚生成的SSH key。在github的设置中,创建一个新的SSH key,将前面在本地id_rsa.pub文件中生成的key填到SSH key中。

3. 部署到Github page

Hexo支持Git/Heroku/Rsync/OpenShift/FTPSync等部署方式,选择git来部署的话,需要安装hexo-deployer-git插件。
第一步,在本地安装部署插件hexo-deployer-git

npm install hexo-deployer-git –save

第二步,打开本地项目根目录下的_config.yml配置文件,在文件末尾,填上如下配置。

deploy:
type: git
repo:
github: https://github.com/用户名/用户名.github.io.git
branch: master

上述配置项中,type是部署方式,repo是要部署到的目的仓库,branch是分支。

然后执行以下命令,就可以部署上传了。以下 g 是 generate 缩写,用于生成本地静态资源,d是deploy的缩写,用于部署到远程仓库:

hexo g -d

部署前最好能先执行一下 hexo clean 命令,清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。
稍等一会,在浏览器访问网址: https://你的用户名.github.io 就会看到你的博客啦!!
详细的Hexo常用命令可参考Hexo官方文档

3.博客基本配置

首先要说明的是,有两份配置文件用于配置博客的相关选项。其中一份是在博客根目录下的配置文件_ config.yml,这个称之为站点配置文件,另一份是在theme文件夹下每个主题的_config.yml,这个称之为主题配置文件。
关于配置文件,此处需要做一点说明。一般的我们是分别配置两个配置文件。在Hexo 3.x版本之后,Next主题推荐用户使用Hexo的Data Files,这样就可以将两处的配置文件合并到一个地方,方便配置。
针对站点的配置,具体可参照官方文档进行修改。
针对主题的配置,也可以参照官方文档的说明进行修改。

1. 设置Hexo主题

Hexo有很多优秀的主题,这里推荐使用Next
使用git安装Next主题:
在站点根目录下,执行

$ git clone https://github.com/theme-next/hexo-theme-next themes/next
注意:clone完成后,可删除调.git文件夹、.gitignore文件等不必要的文件,以将主题文件作为本地项目管理。

在站点配置文件中启用Next主题

theme: next

2. 配置Hexo网站相关信息

找到site的设置,修改相关配置信息。

#Site
title: iYuWe
subtitle: root the world
description: 心有猛虎细嗅蔷薇
keywords: java,python,mysql,spring,linux
author: Eric xie
language: zh-CN
timezone: UTC

3. 设置Hexo站点永久链接

设置永久链接的目的是为了便于分享和SEO优化

#URL
url: https://dangbowen.com #网站的首页地址
root: / #网站的根目录设置
permalink: :year/:month/:day/:title.html #设置的url表现为2018/10/18/hello-world.html 样式
permalink_defaults: :category/:title.html #用分类和博客title当做url地址

4. 配置Hexo站点的favicon

把准备好的favicon放在blog/themes/next/source/images/下

favicon:
small: /images/favicon-16x16-next.png #把favicon名修改成你自己的
medium: /images/favicon-32x32-next.png

5. 配置Hexo的菜单栏

默认只开启了首页和归档。Hexo的所有图标均来自fontawesome
首先在主题配置文件中开启相关的菜单栏,

menu: #菜单设置为 菜单名: /菜单目录 || 菜单图标名字
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
schedule: /schedule/ || calendar
sitemap: /sitemap.xml || sitemap
commonweal: /404/ || heartbeat
menu_settings:
icons: true #显示图标
badges: true #显示统计信息

上述开启菜单栏是没有对应文件的,还需要手动生成菜单栏对应的about/tags/categories等页面。
新建一个about页面:

$ hexo new page tags

找到tags文件 blog/source/about/index.md 编辑它,在头部修改为

---
title: 关于 #页面标题
date: 2018-10-01 13:58:44 #时间随意
type: “about” #页面类型与菜单文件夹对应
comments: false #提示找个页面不需要评论,后续评论插件那里会详细介绍
---

tags/categories等其他菜单配置类似,可参照操作。
404页面是一个比较特殊的页面,用于访问不到指定的网页资源是进行提示。这里将404页面配置成腾讯公益404页面
在source/目录下新建一个404.html文件,注意页面头部不能缺少:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
layout: false
title: "404"
---

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="all">
<meta name="robots" content="index,follow">
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="http://iyuwe6.github.io" homePageName="回到我的主页"></script>
</body>
</html>

6. 配置Hexo本地搜索

安装搜索组件:

npm install hexo-generator-searchdb –save

主题配置文件配置为:

local_search:
enable: true
trigger: auto
top_n_per_article: 1
unescape: false

站点配置文件增加如下配置:

search:
path: search.xml
field: post
format: html
limit: 100

7. 配置Hexo站点的footer信息

底部footer可以显示hexo版权,theme版权,建站时间等个性化配置。

footer:
since: 2015 #建站开始时间
icon:
name: user #设置 建站初始时间和至今时间中间的图标 默认是一个’小人像’更改user为heart可以变成一个’心’
color: “#808080” #更改图标的颜色 红色为 ‘#ff0000’
powered:
enable: true #是否开启hexo驱动
version: true #是否开启hexo版本号
theme:
enable: true #是否开启theme驱动
version: true #是否开启主题版本号
custom_text: Hosted by Coding Pages #这里的底部标识是为了添加coding page服务时的版权声明 打开注释就可以看到底部有一个 hosted by coding pages

8. 配置Hexo站点侧边栏宽度,头像信息,头像设置圆形及旋转等

sidebar:
position: left #选择pisces 或者 gemini 主题是 可以 选择侧边栏 位置 调整左边或者右边

#position: right
width: 300 # muse mist 主题 可以控制侧边栏的宽度
display: post #如果是muse mist 主题 可以选择 侧边栏弹出动作 post 是 只在内容页弹出

#display: always #全局弹出

#display: hide #全局隐藏侧边栏 右下角有角标唤出

#display: remove #移除侧边栏
avatar:
url: /images/avatar.gif #设置头像资源的位置
rounded: false #开启圆形头像
opacity: 1 #不透明的比例 0 就是完全透明
rotated: false #开启旋转

9. 配置Hexo站点的社交信息和友链

social: #和菜单设置格式一样 社交名字: 社交url || 社交图标 ,图标信息还是fontawesome
GitHub: https://github.com/yourname || github
E-Mail: mailto:yourname@gmail.com || envelope
Google: https://plus.google.com/yourname || google
social_icons:
enable: true #显示社交图标
icons_only: false #只显示图标的开关

#Blog rolls
links_icon: link #友链的图标 参考上文
links_title: Links #友链的title 比如你可以更改为 友情链接
links_layout: block #友链摆放的样式,按块 一行一个

#links_layout: inline #按线摆放,一行很多个 切记 同时只能一种样式
links:
Title: http://example.com/ #友链的地址

10. 配置Hexo站点文章摘要

scroll_to_more: true #点击阅读全文后是否跳到标记处,设为false时点击阅读全文可以从头阅读
auto_excerpt: #是否自动截取摘要
enable: false #设置为true则自动截取150字当做首页摘要
length: 150 #自动截取的字数

11. 配置Hexo文章属性显示创建时间、修改时间、分类

post_meta:
item_text: false # 设为true 可以一行显示 文章的所有属性
created_at: true #显示创建时间
updated_at:
enabled: true #显示修改的时间
another_day: true #设true时 如果创建时间和修改时间一样则显示一个时间
categories: true #显示分类信息

12. 配置Hexo站点文章内代码块复制按钮

codeblock:
copy_button:
enable: true #增加复制按钮的开关
show_result: true #点击复制完后是否显示 复制成功 结果提示

13. 配置Hexo站点文章微信公众号

#Wechat Subscriber
wechat_subscriber:
enabled: true
qcode: /images/wechat-qcode.jpg #微信公众号的二维码
description: 这是我的公众号 #公众号描述文字

14. 配置Hexo站点文章微信、支付宝打赏

#Reward
reward_comment: 一毛也是爱~ #打赏描述
wechatpay: /images/wechat_pay.png #微信支付的二维码图片地址
alipay: /images/ali_pay.png #支付宝的地址

#bitcoin: /images/bitcoin.png #这个是设置比特币的…

15. 配置Hexo站点的文章原创声明

post_copyright:
enable: true #设置true就开启了
license: CC BY-NC-SA 4.0

16. 配置Hexo站点文章内代码高亮样式

highlight_theme: normal #可选值为 normal | night | night eighties | night blue | night bright 这几个挑一个喜欢的

17. 配置Hexo站点网页body动态背景效果

canvas_nest: false
three_waves: false
canvas_lines: false
canvas_sphere: false

#四个效果只能开启一个

18. 配置Hexo站点文章内页面图片点击放大

fancybox——一款优秀的弹出框JQuery插件。Github地址为:https://github.com/theme-next/theme-next-fancybox3
首先在themes/next目录下执行:

git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

在主题配置文件中开启fancybox,

fancybox: true

注意:clone完成后,可删除调.git文件夹、.gitignore文件等不必要的文件,以将主题文件作为本地项目管理。

19. 配置fork me on github

点击这里挑选喜欢的样式,然后复制代码,粘贴到themes/next/layout/_layout.swig文件中

下面,并把代码内href内的地址更换为你的github地址。

20. 修改文章底部标签样式

博客底部的标签样式默认为#tag,将其改为:

只需修改模版/themes/next/layout/_macro/post.swig,搜索rel=”tag”>#,将#换成

21. 版权声明

要想开启博客的版权功能,需要设置主题配置文件:

creative_commons:
license: by-nc-sa
sidebar: true
post: true

4.Hexo常用操作

  1. hexo init
    hexo init命令用于初始化本地文件夹作为站点根目录。

    hexo init [folder]
    folder可选参数,用于指定目录的路径,若只有文件夹名则为当前目录

  2. hexo new
    hexo new命令用于新建文章,可简写为hexo n

    hexo new [layout] <br>layout可选参数,用以指定文章类型,若无指定则默认为配置文件中的default_layout。

Hexo 有三种默认布局:post、page 和 draft,它们分别对应不同的路径,而您自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。

布局 路径
post source/_post
page source
draft source/_draft
  1. hexo publish
    hexo publish命令用于发表草稿,和hexo new很相似。

    hexo publish [layout]

  2. hexo generate
    hexo generate命令用于生成静态文件,一般简写为hexo g

    hexo g
    -d选项,指定生成后部署,与hexo d -g等价
    -w选项,监视文件改动

  3. hexo server
    hexo server命令用于启动本地服务器,一般可以简写为hexo s

    hexo s
    -p选项,指定服务器端口,默认为4000
    -i选项,指定服务器IP地址,默认为0.0.0.0
    -s选项,静态模式,仅提供public文件夹中的文件并禁用文件监视

  4. hexo deploy
    hexo deploy命令用于部署网站,一般可简写为hexo d

    hexo d
    -g选项,指定生成后部署,与hexo g -d等价

  5. hexo clean
    hexo clean命令用于清理缓存文件

    hexo clean

更多关于hexo的命令可参考Hexo的官方文档

5. 博客优化

1. 静态图床

虽然是静态博客,但是文章中难免会用到不少的图片,图片需要一个存储的地方。这里推荐使用图床来存储我们的图片,所谓图床,就是专用于存储图片的服务器,将图片上传后,能生成外链来访问。网络上有不少免费图床可供使用,例如七牛云sm.ms、微博图床等。各种图床各有利弊,这里推荐使用微博图床。我们只需要在chrome浏览器的扩展程序中搜索到微博图床的插件并安装,后面使用这个插件就能很方便的使用微博图床。
使用界面如下:

本插件的详细使用说明可参考github地址WeiboPicBed

2.字数统计和阅读统计

对于博客的文章,我们可以为其增加相关的字数统计、阅读统计等相关信息。
next主题中有busuanzi阅读统计的配置,我们只需在其中开启即可。

busuanzi_count:
enable: false #设true 开启
total_visitors: true #总阅读人数 uv数
total_visitors_icon: user #阅读总人数的图标
total_views: true #总阅读次数 pv数
total_views_icon: eye #阅读总次数的图标
post_views: true #开启内容阅读次数
post_views_icon: eye #内容页阅读数的图标

新增字数统计和阅读时长,需要安装插件

$ npm install hexo-symbols-count-time –save

在主题配置文件中开启相关配置如下:

symbols_count_time:
separated_meta: true # false 会显示一行
item_text_post: true # 显示属性名称,设为false后只显示图标和统计数字,不显示属性的文字
item_text_total: true #底部footer是否显示字数统计属性文字
awl: 4 #计算字数的一个设置,没设置过
wpm: 275 #一分钟阅读的字数

在站点配置文件中新增如下配置:

symbols_count_time:

#文章内是否显示
symbols: true
time: true

#网页底部是否显示
total_symbols: true
total_time: true

3. 配置博客的评论系统

Hexo next主题支持多种评论系统,各有利弊,这里推荐使用valine——一款基于LeanCloud的快速、简洁且高效的无后端评论系统。
首先,到LeanCloud登录注册一个账号,注册后登录创建一个应用,然后在设置里面找到AppId和AppKey添加到主题配置文件对应的位置。

配置文件配置为:

valine:
enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
appid: # your leancloud application appid
appkey: # your leancloud application appkey
notify: false # mail notifier, See: https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: Just go go # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
language: # language, available values: en, zh-cn
visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors’ for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
comment_count: true # if false, comment count will only be displayed in post page, not in home page

4. 博客同时部署到coding

博客部署到国外的github上,由于众所周知的原因,在访问时可能会很慢甚至无法访问,所以我们需要将博客同时部署到国内的coding上。而且这也有助于后续做负载均衡,使国内访客访问coding上的博客,国外访客访问github上的博客,还有一点是据说github屏蔽了百度的爬虫,对于百度收录我们的博客会有一定的影响。综上所述,我们需要将博客同步部署到coding上。整个操作步骤大致和github相同。

  1. 注册/登录coding
  2. 新建一个项目,项目名为yourusername.coding.me。然后进入项目,在左侧项目的设置中找到Pages服务,在这里可以配置域名,选择项目代码分支等。
  3. 配置SSH key,参照github配置SSH key。
  4. 在站点配置文件中的部署配置中,把coding的项目地址配置进去。

这样,当你后面执行hexo g -d操作时,就会将博客同时发布到github和coding上。

5. 绑定域名

我们现在可以通过用户名.github.io和用户名.coding.me这两个URL访问我们的博客,但是这种URL不是很美观,不够个性,那么我们就需要去购买一个域名,然后绑定在我们的博客上,我们就能通过域名进行访问了。

  1. 购买域名注册
    购买域名可以到域名服务商去购买,如国内的阿里云腾讯云、国外的Godaddy等。
  2. 配置域名解析
    购买好了域名,我们还要让域名解析到博客的地址。首先,我们去到刚刚刚刚购买域名的服务商那里,进入域名管理的控制台,一般来说,域名服务商会同时提供域名注册和域名解析的服务,在我们购买好域名后,域名服务商会给我们配置上域名解析的服务。但是他们提供的域名解析服务可能收费或者是解析效果不好,这里推荐几个优秀的免费域名解析服务商,国内的有dnspodcloudxns,国外的有cloudflare。我的域名是从godaddy上购买的,使用的是dnspod的域名解析服务。下面以godaddy域名+dnspod解析来讲解具体操作步骤。
    首先,进入godaddy下的域名管理,点击设置域名服务器,如图:

    然后,选择自定义域名,如图

    最后,添加dnspod的DNS,确认,如图:

    这样,就将我们的域名解析从godaddy转到了dnspod。
    然后,进入到dnspod,配置我们的域名解析,如图:

    分别添加两条CNAME记录指向github和coding的Pages服务地址。
    最后,在github和coding的项目的设置中设置我们的域名。

参考文档:

  1. https://juejin.im/post/5c4730c9f265da61616efeec#heading-12
  2. https://www.cnblogs.com/wsmrzx/p/9439448.html
  3. https://blog.csdn.net/marvinboy/article/details/83350437

The End!