网络基础之搭建Hexo博客

Posted on | In , , ,

本文分别从树莓派、Termux以及VPS CentOS介绍如何搭建Hexo博客系统

一、树莓派上搭建Hexo博客

问题：hexo是静态博客，支持markdown，wordpress需要数据库支持，两者可以共存于一张树莓派上吗？

1、我在树莓派上搭建本地博客的历程

在树莓派上搭建博客，我开始用apache+wordpress，后了改用ngix+wordpress，下一步打算换成git+hexo。先在github上体验，熟悉了之后在本地实现，当然为数据安全起见，旧的wordpress保留，换一块tf卡实现hexo。

Wordpress对Markdown支持太差了，计划新建Hexo博客，我的一块老树莓派支持两个博客系统同时运行吗？
需要安装git吗？需要ngix支持吗？Hexo和Wordpress比较，不需要数据库，是静态博客，使用Markdown格式，对写手非常友好，还支持流程图、目录等让我心动的扩展特性。

当然hexo也有其缺点，wordpress可以在线编辑博客内容，只要有浏览器就可以了，也就是说在手机上都可以发博客。hexo则需要一台电脑，在手机上无法发博客了，很大很大的缺点啊。只好登录github，在线编辑博客了。

我有一个大胆的想法：一直想买一块树莓派3，但是树莓派3与我的Pro5手机都是用的A57芯片，感觉有重复投资的尴尬。用手机做服务器功耗还是很小的，而且有触摸屏。想象到以后家里用手机做服务器的远景，还是很诱人哒！
树莓派快速搭建hexo博客系统
树莓派Hexo博客配置
在Android手机搭建Hexo博客环境
hexo+github pages博客建立以及同步到手机

2、为什么要学习Markdown与LaTex

1）、Markdown是什么？

如下是维基百科的介绍摘选：
Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。它允许人们“使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML(或者HTML)文档”。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

Markdown可以用十个左右的关键字，实现文章格式化，而且被wordpress等兼容。

2）、相关的编辑器

很多，比较有名的：sublime、atom、haroopad。目前我使用typora与stackedit：
typora（Win+Mac）：所见即所得，支持流程图，支持Latex公式。安利一下Typora：极致简洁的markdown编辑器
google chrome扩展：stackedit，支持离线编辑，支持流程图。

编辑器的兼容性：我用typora写日志，用了列表与check项（表达不规范啊，以后修改），复制到haroopad与stackedit，后两个都与typora显示不一致！
官方的编辑器是谁？如何判断三者的对与错？
练习mermaid扩展graph，在haroopad与stackedit中无效啊？咋回事？grahp与flowchart有啥区别？

3）、Markdown如何实现目录

TOC吗？

4）、Markdown extension之流程图flow、甘特图gantt、流程图graph

相比MS Office常用流程图符号，Markdown能实现哪些流程图样式，有哪些限制？
先学哪些基本的流程图（比较Word，常用的排版也就是设置行间距，字体样式，排序、表格等），进阶再学哪些（目录）？

1）flow

Markdown流程图（flow）测试代码：

``flow

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op


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
</pre>

##### 2）gantt

甘特图（mermaid gantt）测试代码（来自[Draw Diagrams With Markdown](http://support.typora.io/Draw-Diagrams-With-Markdown/)）：
<pre>```mermaid
%% Example with slection of syntaxes
        gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid

        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d

        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h

        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h


</pre>

##### 3）graph

流程图graph（mermaid flowchart）测试代码：
<pre>
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
    graph TD
        B["fa:fa-twitter for peace"]
        B--&gt;C[fa:fa-ban forbidden]
        B--&gt;D(fa:fa-spinner);
        B--&gt;E(A fa:fa-camera-retro perhaps?);
    ``

###### a、graph的节点（Node）形状

<pre>矩形（node default）：例如 A
矩形带内容（node with text）：例如 A[你好] 注意，字符串中带括号等特殊字符，需要用双引号将字符串包围起来。
圆角矩形：例如 A(你好)
圆形：例如 A((你好))
非对称形（a node in a asymetric shape ）：例如 A&gt;你好]
菱形（rhombus）：例如 A{你好}
</pre>

###### b、graph连线形状

<pre>直线（缺省）： A---B
带字符： A--text---B 或者 A---|text|B
带字符有箭头：A--&gt;|text|B 或 A--text--&gt;B
虚线箭头：A-.-&gt;B 问题：A--&gt;B是啥？
虚线箭头带文字： A-.text.-&gt;B
粗线箭头：A==&gt;B
粗线箭头带文字：A==text==&gt;B
</pre>
为啥以下graph在typora中显示方向错误，而且会提示语法错误？
<pre>```mermaid
graph TD
    A[产品规划]
    B{会议纪要}
    C(规格书)
    A--&gt;B--&gt;C


一个新品开发流程实例（需要解决如何添加特殊字符，比如换行符、顿号等）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
graph TD
a1[样机需求单输入] --&gt; b1[产品经理]
b1 --&gt; c1(电路设计)
b1 --&gt; c2(结构设计)
b1 --&gt; c3(模组设计)
b1 --&gt; c4(电源设计)
b1 --&gt; c5(软件设计)
b1 --&gt; c6(样机接口人)
c1 --&gt; d1[1样机需求人安排提机黄岛或提供借机单据给样机接口人借机青岛2样机到位后样机接口人添加整改样机流程]
c2 --&gt; d1
c3 --&gt; d1
c4 --&gt; d1
c5 --&gt; d1
c6 --&gt; d1
d1 --&gt;|整改样机流程|e1(模组设计结构设计第一级)
e1 --&gt; f1(电路设计工艺设计软件设计第二级)
f1 --&gt; g1(请硬件测试工程师韩春海现场检验样机并在PLM中审批整改记录第三级)
g1 --&gt; h1(国际营销提供提交发货申请单并安排快递提货通知样机接口人备货)
h1 --&gt; i1(样机接口人发货)
4）单独使用mermaid

可以通过npm安装mermad（mermaid依赖于phantomjs）：

npm install -g mermaid

npm install -g phantomjs
语法学习：

Markdown: 语法
Markdown基础教程 - 曾梦想仗剑走天涯
Markdown流程图语法
Markdown笔记：如何画流程图
进击的Markdown教程
markdown绘图插件—-mermaid简介
mermaid docs

问题：在本地wordpress服务上实现对Markdown的支持（失败，放弃吧）

Wordpress.com网站支持Markdown，可以在设置中打开。
但是我在树莓派上安装的本地Wordpress程序目前还不支持，需要通过安装插件实现，推荐使用两个插件：WP Editor.MD和Jetpack（wordpress.com官方实现Markdown的方式）。经过简单测试，这两个插件其实是把用户用Markdown格式书写的博客，转换成了wordpress的标记语言。比如我用两个井号写了一个二级标题，发布之后显示正常，再看源代码，编程了尖括号的h2了！原生支持该多好啊。估计因为这个原因，流程图和甘特图的支持就没有希望了？

参考的是文章：在Wordpress中如何使用MarkDown编辑博文

这篇博文讲述了wordpress部分支持markdown的格式化快捷键方式，比如用两个＃号输入二级标题，换行后，wordpress会自动转换为<h2>语法：

WordPress 迈向 Markdown 的脚步

Editor.MD插件：

问题1：编辑界面显示错误
启动插件后，编辑本文出现界面混乱，把源代码显示到预览区了。应该是目前wordpress的软件BUG，点击更新按钮就好了。新开一篇文章也没有问题。但左右窗口不能很好的对齐，是不是离线编辑器也是如此，无法避免？
问题2：查看文章错误
把标题改成Markdown格式，明明编辑器中预览很好的，查看文章时并不支持Markdown啊？后来才知道不支持一级标题。问题来了，本地Wordpress程序原生支持Markdown，不装插件其实也可以直接写，只是在写博客时不能及时预览，不方便罢了。
问题3：旧文章的转换
我目前的博客中，用到的特殊格式很少，主要有4种需要转换为Markdown格式：一级标题，pre代码，code代码，超链接。
一级标题：不支持吗，因为Wordpress开发团队认为文章题目是一级标题，所以文章内容最高二级标题。注意井号后加空格，Editor.MD插件处理的不严谨。
pre代码：
code代码：
超链接：

Jetpack 插件：

由于不能忍受编辑界面显示错误，关闭Editor.MD插件，开启Jetpack插件。本地Wordpress服务中的编辑界面又回到熟悉的原生界面了。而且我发觉手工将H1改为Markdown语法的两个井号的二级标题，也自动改回H2了，好奇怪！

问题4：流程图、序列图、甘特图等
目前我的博文都是纯文字的，希望早早转到采用Markdown编写上。尤其是要实现第一个流程图！
博客编辑神器：Markdown编辑器
LaTex能实现数学公式，暂时用不上。

二、Android之搭建Hexo博客

目的：基于hexo的github pages，实现markdown写作

遇到的难以解决的问题：

1、安装debian会走ss流量，如果 ss延迟较大，会提示失败，关闭ss直接连接 ftp.debian 没有网络问题，但比优质ss网速慢很多，说明防火墙的影响还是很明显的。

2、不小心退出xfce，再进入就没有桌面了，不知道如何恢复。还有xfce桌面分辨率为1920*1080，太高了，如何降低？

3、如何在xfce中安装firefox？
新手需要注意的问题：
1、开启ssh与vnc

2、如何完全卸载linux实例

3、busybox用来扩充linux命令？

手机搭建服务器的优缺点

Pro：

1、功耗低，不需要另外购置硬件，减少开销

2、随着无限流量时代的到来，可以做到服务器在手

3、Android手机通过LTE上网，获得的是IP v6？是不是可以轻松看YouTube？
Linux Deploy:在Android上部署Linux
旧手机小用途：在Android手机上建网站，较完全指南
用Linux Deploy在Android上安装Linux

实践1：安装首个debian实例

路由器中给手机固定局域网IP地址，例如192.168.1.191

手机root

通过官网下载Linux Deploy并安装运行

右上角菜单“配置”中选中ssh与vnc

右上角菜单“安装”，直到提示“deploy”

左下角“启动”，直到提示“start”

右下角图标查看账号密码信息，通过putty ssh连接ok

通过vnc viewer连接ok，但是图形界面分辨率过高，改LXDE为xfce可以吗？
实践2：测试性能（连接debian服务器需要翻墙？反正自己的ss开启有问题时无法更新，换购买的ss就好了）
sudo apt-get update #问题：su的密码是啥?我是通过“sudo passwd root”修改了root密码来解决的。

sudo apt-get install sysbench

sysbench –test=cpu –cpu-max-prime=20000 run
魅蓝一代note成绩是344秒，比我的树莓派一代1460秒快很多，也比树莓派3代快一些。相信魅族Pro5的性能会更好。详细内容如下：
Doing CPU performance benchmark

Threads started!

Done.

Maximum prime number checked in CPU test: 20000

Test execution summary:

total time: 344.6957s

total number of events: 10000

total time taken by event execution: 344.6883

per-request statistics:

min: 34.20ms

avg: 34.47ms

max: 51.72ms

approx. 95 percentile: 34.66ms

Threads fairness:

events (avg/stddev): 10000.0000/0.00

execution time (avg/stddev): 344.6883/0.00
问题:我想在魅族Pro5上测试sysbench，但是手机没有安装linux deploy，只有termux，无法安装sysbench。如何解决？

实践3：搭建hexo环境
参考

在Android手机搭建Hexo博客环境

Hexo博客搭建全攻略(一):基于Hexo+Github环境搭建
sudo apt-get install git-core

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
实践4：安装codeblock开发环境
sudo apt-get install build-essential #安装编译器

sudo apt-get install gdb #安装debug工具

g++ -c hello.cpp #编译一个简单的c++程序

g++ -o hello hello.o #链接，如果不用 -o，g++ hello.cpp会不生成 hello.o 文件，直接输出可执行文件 a.out

./hello #执行

三、在VPS上搭建Hexo博客

服务器平台：vultr（VPS提供商），而不是github

软件平台：CentOS，Nginx

1、配置服务器端环境：

1）、VPS新建CentOS Server上搭建Nginx

passwd # Windows 10环境下，通过putty登录（复制初始密码，通过鼠标右键粘贴），修改root密码

rpm -q centos-release # centos-release-7-3.1611.el7.centos.x86_64

yum install epel-release # 安装 CentOS 7 EPEL 源，似乎没有必要，所以没有执行

yum install nginx # 安装 Nginx

systemctl start nginx #启动Nginx

firewall-cmd –permanent –zone=public –add-service=http #添加 HTTP 和 HTTPS 端口到防火墙允许列表

sudo firewall-cmd –permanent –zone=public –add-service=https

sudo firewall-cmd –reload

sudo systemctl restart firewalld.service

打开浏览器，复制Server的ip地址，回车，就会看到欢迎页面：“Welcome to nginx on Fedora!”。注意提示：index.html在“/usr/share/nginx/html”目录中，nginx配置文件在“/etc/nginx/nginx.conf”

curl 127.0.0.1 # 会显示Nginx主页的html代码

yum install net-tools #安装网络工具

netstat -ntpl #确认Nginx打开了80端口，但是没有443端口，为啥？

netstat测试内容如下：
Active Internet connections (only servers)

Proto Recv-Q Send-Q Local Address Foreign Address State PID/Program name

tcp 0 0 0.0.0.0:80 0.0.0.0:* LISTEN 2493/nginx: master

tcp 0 0 0.0.0.0:22 0.0.0.0:* LISTEN 429/sshd

tcp 0 0 127.0.0.1:25 0.0.0.0:* LISTEN 606/master

tcp6 0 0 :::80 :::* LISTEN 2493/nginx: master

tcp6 0 0 :::22 :::* LISTEN 429/sshd

tcp6 0 0 ::1:25 :::* LISTEN 606/master
2）、配置Nginx虚拟主机

mkdir -p /usr/share/nginx/blog/html #新建blog目录用于放置Hexo，新建一个测试用index.html主页文件

vi /etc/nginx/conf.d/blog.conf #新建虚拟主机配置文件，因为nginx配置文件（/etc/nginx/nginx.conf）内包含一行内容”include /etc/nginx/conf.d/*.conf;“，所以是可行的。

systemctl restart nginx #重启 Nginx 服务器，使nginx服务器虚拟主机设定生效

新配置文件”blog.conf”内容如下：
server {

listen 80;

listen [::]:80;

root /usr/share/nginx/blog/html;

index index.html index.htm index.nginx-debian.html;

server_name zhangqihui.mobi www.zhangqihui.mobi;

location / {

try_files $uri $uri/ =404;

}

}
本地Windows 10电脑，编辑“C:\Windows\System32\drivers\etc/hosts” #增加一行“xx.xx.xx.xx zhangqihui.tk“ 将服务器ip地址指向自己的域名，打开浏览器，通过域名就可以看到虚拟机测试主页了。（我先设置了DNS CNAME，没有测试）

3）、到DNS将域名解析到服务器地址

到godaddy，配置zhangqihui.mobi DNS指向VPS ip地址

到tk网站，通过我的Facebook账户登录，将zhangqihui.tk指向服务器ip地址 #因tk网站不稳定，改用godaddy
4）、部署Hexo

yum install git #在 VPS 上安装 git

cd ~

mkdir blog.git && cd blog.git #创建空白 git 仓库，并且设置 git hook

git init –bare #返回提示“Initialized empty Git repository in /root/blog.git/”

cd hooks

vi post-receive #创建脚本，并写入内容

chmod +x post-receive #赋予脚本的执行权限

在 /root/blog.git/hooks/post-receive 脚本内容如下：

#!/bin/bash
GIT_REPO=/root/blog.git #git仓库
TMP_GIT_CLONE=/tmp/blog
PUBLIC_WWW=/usr/share/nginx/blog/html #网站目录
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

2、配置本机环境

1）、Windows 10 安装Hexo环境

缺省设置安装git； # (2.15.1) 64-bit version of Git for Windows ，需要FQ，TNND!

缺省设置安装Node.js； # node-v9.2.0-x64.msi
在D盘新建hexo目录，通过鼠标右键命令“Git Bash Here”
$ npm install hexo-cli -g
提示如下：
C:\Users\qdmca\AppData\Roaming\npm\hexo -> C:\Users\qdmca\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\hexo-cli\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32”,”arch”:”x64”})

added 217 packages in 68.345s
$ hexo init blog #在 blog 目录下初始化 hexo 博客
提示如下：
INFO Cloning hexo-starter to D:\hexo\blog

Cloning into ‘D:\hexo\blog’…

remote: Counting objects: 62, done.

remote: Compressing objects: 100% (2/2), done.

remote: Total 62 (delta 0), reused 2 (delta 0), pack-reused 59

Unpacking objects: 100% (62/62), done.

Submodule ‘themes/landscape’ (https://github.com/hexojs/hexo-theme-landscape.git) registered for path ‘themes/landscape’

Cloning into ‘D:/hexo/blog/themes/landscape’…

remote: Counting objects: 785, done.

remote: Total 785 (delta 0), reused 0 (delta 0), pack-reused 785

Receiving objects: 100% (785/785), 2.53 MiB | 1.08 MiB/s, done.

Resolving deltas: 100% (410/410), done.

Submodule path ‘themes/landscape’: checked out ‘73a23c51f8487cfcd7c6deec96ccc7543960d350’

INFO Install dependencies

▒▒Ϣ: ▒▒▒ṩ▒▒ģʽ▒޷▒▒ҵ▒▒ļ▒▒▒

npm WARN deprecated swig@1.4.2: This package is no longer maintained

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32”,”arch”:”x64”})

added 429 packages in 22.993s

INFO Start blogging with Hexo!
$ cd blog #进入博客根目录，并且安装相关插件依赖等

$ npm install
提示如下：
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32”,”arch”:”x64”})

added 116 packages in 10.783s
$ hexo g # 渲染 Source 目录下文件问静态页面
提示如下：
INFO Start processing

INFO Files loaded in 314 ms

INFO Generated: index.html

INFO Generated: archives/index.html

INFO Generated: fancybox/jquery.fancybox.js

INFO Generated: fancybox/fancybox_loading.gif

INFO Generated: fancybox/blank.gif

INFO Generated: fancybox/jquery.fancybox.css

INFO Generated: fancybox/fancybox_loading@2x.gif

INFO Generated: archives/2017/index.html

INFO Generated: fancybox/jquery.fancybox.pack.js

INFO Generated: fancybox/fancybox_overlay.png

INFO Generated: fancybox/fancybox_sprite@2x.png

INFO Generated: css/fonts/FontAwesome.otf

INFO Generated: fancybox/fancybox_sprite.png

INFO Generated: fancybox/helpers/jquery.fancybox-buttons.css

INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.css

INFO Generated: fancybox/helpers/jquery.fancybox-buttons.js

INFO Generated: archives/2017/12/index.html

INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.js

INFO Generated: css/style.css

INFO Generated: css/fonts/fontawesome-webfont.eot

INFO Generated: css/fonts/fontawesome-webfont.woff

INFO Generated: js/script.js

INFO Generated: css/images/banner.jpg

INFO Generated: fancybox/helpers/jquery.fancybox-media.js

INFO Generated: css/fonts/fontawesome-webfont.ttf

INFO Generated: 2017/12/03/hello-world/index.html

INFO Generated: fancybox/helpers/fancybox_buttons.png

INFO Generated: css/fonts/fontawesome-webfont.svg

INFO 28 files generated in 844 ms
$ hexo s # 本地跑一个 server 来看博客效果
提示如下：
INFO Start processing

INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
本地浏览器打开网址“http://localhost:4000/”，测试hexo安装成功 #如果通过路由器端口映射，应该在外网也能看到

2）、配置本机环境

$ npm install hexo-deployer-git –save #在博客目录下运行下面命令，安装 git 部署工具
提示如下：
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32”,”arch”:”x64”})

added 132 packages in 18.447s

qdmca@ASUS13 MINGW64 /d/hexo/blog
编辑博客配置文件“_config.yml”为如下内容（修改deploy选项，注意，冒号后面有空格，否则会出错！）：
deploy:

type: git

message: update

repo:

s1: root@45.32.227.150:/root/blog.git/,master
$ git config –global user.email “3dlinux@gmail.com“ #配置本地git用户信息

$ git config –global user.name “root”

$hexo d #部署本地渲染网页到服务器上
本文参考：从 0 开始搭建 hexo 博客
在VPS上搭建hexo博客，利用git更新