博客搭建、发布及markdown的基本使用

发表于 | 分类于

  由于原来学习东西的时候都是在网上边学边用，缺少记录，有些知识总是容易忘记，所以针对博客建立和发布编写一个小文档作为记录。

博客搭建

安装Node.js

  这里使用的是Hexo博客框架，它是基于Node.js的一种静态博客框架，可以用来生成各种静态网页。因此需要首先安装Node.js，下载地址。

  安装完了之后可以通过：node -v或者npm -v命令查看安装版本，以此确认是否安装成功。Windows10系统推荐直接使用powershell进行check。前面提到的npm其实是一个附带的工具，用于下载其他的程序。如果下载的时候国内网速太慢亦可以使用npm install -g cnpm --registry=https://registry.npm.taobao.org下载cnpm代替npm的使用。

安装Hexo

  在成功安装了Node.js之后接下来安装Hexo框架。在安装之前首先应该在本地建立和github远端相关联的github.io仓库。github会给每个账户提供一个仓库用于部署github.io的个人网站，其仓库名默认为：用户名/用户名.github.io。（git的使用可以见廖雪峰老师的网站，讲得很仔细)。
  使用如下命令在本地的仓库安装hexo：

1
2
3
4
5
cnpm install -g hexo-cli
hexo init blog
cd blog
cnpm install
hexo s

接下来，可以打开浏览器使用域名localhost:4000来访问本机地址。hexo默认端口号是4000。
  如下也是一些hexo常用的命令：

1
2
3
4
5
hexo clean（清理缓存文件和原来的静态文件例如：db.json和public里面的文件）
hexo g（g: generate。生成静态文件：public里面）
hexo d（d: deploy。将当前环境远端部署）
hexo s（s: server。 将当前环境在本地测试部署，及在localhost:4000可以访问）
hexo new (用于生成特定名称的博客markdown文件)

  在本地仓库仓库的hexo部署好之后使用hexo g命令之后在localhost:4000访问生成的默认网站，以此可以表明安装成功。

部署到github

  在hexo的安装目录下找到_config.yml文件，这是hexo的配置文件，在里面加上如下部署信息（注意冒号后面都有一个空格，不然会出现部署文件编写错误的情况）：

1
2
3
4
5
deploy:
  type: git
  repository:
    github: git@github.com:用户名/用户名.github.io.git
  branch: master

然后使用如下命令部署。这样就可以在github远端看到仓库里面生成了很多静态文件。

1
2
3
cnpm install  hexo-deployer-git --save
hexo g
hexo d

为了让部署更加明晰，可以参考以下的hexo目录机构及其主要文件功能。

1
2
3
4
./_config.yml	hexo配置文件
./public	存放生成的HTML文件
./source/_posts	编辑的markdown文件
./theme	存放主题的文件夹（每个主题文件夹中的_config.yml是主题的配置文件例如：./theme/landscape/_config.yml、./theme/next/_config_yml）

hexo基本配置

  在hexo的配置文件config_yml中可以使用如下几项用于修改个性化信息。

1
2
3
4
5
6
7
8
title 设置用于网站的主题名
subtitle 设置网站的小标题
description 设置网站的描述
author 设置作者
language 设置语言模式
post_asset_folder 设置后每次生成文章的时候会新建存放图片的一个同名文件件
avatar 设置头像
post_asset_folder 设置是否自动生成同名的博客文件夹（存放图片或其他文件）

除此之外，hexo往往会借助使用主题配置，便于个性化设置，这里以next主题为例。先从github将主题仓库克隆到本地git clone https://github.com/iissnan/hexo-theme-next themes/next。接下来打开hexo的配置文件，将theme选项改为next。然后可以使用之前介绍的hexo g生成静态文件，hexo s运行到本地服务器在本地进行查看。最后可以通过修改主题配置文件进行个性化选择。

主题风格

  通过修改主题配置文件里面的sheme对next风格修改，目前默认的有Muse, Mist, Pisces, Gemini四种风格可供选择。

菜单设置

  主题配置文件中，menu设置部分的home是主页，catergories是设置分类，archives是设置归档，tag设置标签，可以用注释的方式进行选择。若取消categories和tag的注释，接下来需要使用hexo new page categories和hexo new page tags生成相应的markdown文件，然后在./source/文件夹中可以找到相应的categories和tags的index.md配置文件。最后分别添加type: "categories"和type: "tags"字段。示例如下：其中的comments字段可以用于设置评论功能。除此之外，主题配置文件中auto_excerpt字段用于设置摘要。如果需要其他的第三方配置，例如需要解析数学公式等，需要更改主题配置文件的mathjax字段，将默认的false改为true。同时在需要加载mathjax的markdown页面头部加上mathjax: true，这样可以确保不必要地在所有页面加载mathjax提高网页执行效率。

博客发布

  使用hexo new生成相应名称markdown文件（位于./source/_post/），然后进行编辑。使用markdown语法编辑完成之后，保存，然后可以hexo g和hexo s生成静态文件，在本地进行测试。如果测试没有问题，最后使用hexo d发布。

博客环境配置的常见问题

  1. 报错” ERROR Plugin load failed: hexo-deployer-git “

    尝试解决方案：cnpm install hexo-deployer-git --save。

  2. 报错”ERROR Plugin load failed: hexo-generator-json-content “

    尝试解决方案：将node升级；同时尝试命令cnpm i hexo-generator-json-content --save。

  3. 报错出现SSH方面链接问题，说明是远端访问没有正确连接。检查hexo配置文件中的deploy字段信息。

markdown的基本使用

段落格式

标题控制

  markdown支持最多六级标题，#表示一级标题，##表示二级标题，以此类推。其分别和HTML中的h1->h6对应。注意#后面有一个空格标题的使用和效果如下：

1
2
3
4
5
6
# 一级
## 二级
### 三级
#### 四级
##### 五级
###### 六级

代码块

  利用两个“`”符号包括起来就可形成行内式代码结构。同时在代码段中可以使用Tab键作为缩进，一般一个Tab键的缩进相当于四个space的缩进。
  对于多行的代码格式可以采用两行```将代码段包括。这样就可以形成单独成成段的代码。另外，对于多行代码段结构，可以在第一行的```后面加上代码类型例如：C++格式的代码可以使用cpp进行标注。行内代码段效果如下：行内代码段;单独成块的代码段：

1
2
3
4
class book{
public:
   string m_name;
}

引用块

  使用>符号加上一个空格可以将文字单列成一小段，并且>符号还可以嵌套使用。
使用效果如下：

引用块

引用块

引用块

列表块格式

  markdown语法中使用*,+或-加上一个空格来表示无序表；使用一个数字和一个英文句号表示有序表。另外有序和无序的表示还可以搭配使用。使用效果如下：

  • 无序表1
  • 无序表2
  1. 有序表1
  2. 有序表2
表格

  表格的构造方式与表格的性状相似用如下代码构造表格。

1
2
3
4
5
姓名|班级|学号
-|-|-
狗|111|111
猫|222|222
鼠|333|333

姓名 班级 学号
狗 111 111
猫 222 222
鼠 333 333

其表格默认的对其方式均为左对齐，需要调整对其方式可以在表头构造部分加上‘:’冒号，当冒号位于左侧、两侧和右侧的时候分别表示左对齐，居中和右对齐。例如上述表格三列分别按照左对齐，居中和右对齐方式排列就有如下构造方式。

1
2
3
4
5
姓名|班级|学号
:-|:-:|-:
狗|111|111
猫|222|222
鼠|333|333

姓名 班级 学号
狗 111 111
猫 222 222
鼠 333 333

对于复杂的表格也可以借助markdown可视化编辑器进行构建。

字体格式

*斜体文字* 斜体文字 快捷键：ctrl+i

**加粗字体** 加粗字体 快捷键：ctrl+b

***倾斜加粗*** 倾斜加粗  快捷键：先ctrl+i；然后ctrl+b

~~删除线~~ 删除线

字体大小可以通过如下HTML格式进行调整：

1
2
3
<font size="10 ">十号字体实现效果</font><br/>
<font size="5 ">十号字体实现效果</font><br/>
<font size="2 ">十号字体实现效果</font><br/>

10号字体实现效果
5号字体实现效果
2号字体实现效果

字体的颜色调整中同样可以使用HTML的格式效果进行渲染，六位十六进制的数字代表颜色RGB，主要的颜色配置方式如下：

1
<font color="#FFFFFF"></font><br/>

其中每一个位数字都可以用0~F的十六进制数字表示，每两位代表一种原色。例如R可以使用FF0000表示。

FF0000的颜色
00FF00的颜色
00FF00的颜色

图片和链接

  图片的插入格式：![图片标注]（图片相对于当前文档的位置）；链接插入格式：[链接标注]（链接地址）。对于图片居中，左对齐和右对齐可以分别使用如下方式控制：

1
2
3
<div align=center>![图片标注]（图片相对于当前文档的位置）</div>
<div align=left（图片相对于当前文档的位置）</div>
<div align=right>![图片标注]（图片相对于当前文档的位置）</div>

  注意:
  hexo3之后很多插件都用不了了，所以以上的语法可能导致在网站上面的图片解析不了不出来。因此可以使用如下方式进行图片导入，以下三种方式是hexo官方的导入图片方式。

1
2
3
方式一：{% asset_path 资源名称（可以无需加路径） %}
方式二：{% asset_img 资源名称（可以无需加路径） [title] %} 图片直接显示
方式三：{% asset_link 资源名称（可以无需加路径） [title] %} 图片以链接的展现，点击即可出现

参考资料：

  1. Awesome Hexo List
  2. Tutorial Doc.