Hexo - Generate Static Web Page

Posted on 2019-04-20 Edited on 2023-01-17 In linux , services , web , hexo Symbols count in article: 13k Reading time ≈ 12 mins.

Heart

原来一直用CSDN博客记录一些学习心得，后来放弃了。主要原因为做排版太费时间，发表一篇文章，写作时间占比不多，其余时间都用来排版了。遂想用 Markdown 来写文章，寻寻觅觅许久，终于发现了 Hexo。

Hexo，静态博客，使用 Markdown 来写文章，一条命令即可直接发表文章。

优点：让作者专注于文章内容而非网页排版，最后再由 Hexo 生成静态网页。
缺点：需要自建博客，如准备域名、VPS……

由于 Hexo 生成的内容为静态网页，所以部分网友直接将它生成的网页部署在了 Github 上，这样 VPS 和域名都不用准备了。

静态网页的优点：

页面内容相对稳定，不含特殊代码。
容易被搜索引擎检索，更加适合 SEO 搜索引擎优化。
不需通过数据库工作，所以访问速度比较快。

安装Hexo

首先需要搭建Node.js环境，详见Use Nvm to install Node.js

安装

:~$ npm install -g hexo-cli
:~$ hexo init blog
:~$ cd blog
:~/blog$ npm install
:~/blog$ hexo server

升级

1
2
3

:~$ cd blog
:~/blog$ npm outdated
:~/blog$ npm install

配置优化

这个有点麻烦，需要花时间调试。需要修改全局配置文件、皮肤配置文件，创建页面模板（标签、分类、归档、关于）等等。
但好在只需要配置一次即可。

创建网页模板

# create tags page
:~$ mkdir -p blog/sources/tags
:~$ echo '
---
title: tags
date: 2018-12-12 12:12
type: "tags"
sitemap:false
---
' > blog/source/tags/index.md

# Create Categore page
:~$ mkdir -p blog/sources/categories
:~$ echo '
---
title: categories
date: 2018-12-12 12:12
type: "categories"
sitemap:false
---
' >source/categories/index.md

# about page
:~$ mkdir -p blog/source/about
:~$ cat > /blog/source/about/index.md << EOF
---
title: about
date: 2018-12-23 17:47:10
type: "about"
sitemap: false
---

something to me!
nothing to now!
EOF

# 404 page
:~$ mkdir -p blog/source/404
:~$ cat >> blog/source/404/index.md << EOF
---
title: 404-Unkown Page
date: 2018-12-23 22:56
type: "commonweal"
layout: true
sitemap: false
---

<div>
    <p style="text-align: center;font-family: cursive;font-size: 150px;font-weight: bold;line-height: 100px;letter-spacing: 5px;"><span>4</span><span>0</span><span>4</span></p>
    <p style="text-align:center;font-family: cursive;font-size: 25px;font-weight: bold;line-height: 8px;letter-spacing: 5px">该页面不存在(´･ω･`)</p>
</div>
EOF

# Schedule
:~$ mkdir -p blog/source/schedule
:~$ cat >> blog/source/schedule << EOF
---
title: schedule
date: 2018-12-23 19:17:19
type: "schedule"
sitemap: false
---
EOF

第一篇blog - Hello Word

需要发表的源文件在blog/source/_posts/目录下。

# Method 1
:~$ cat > blog/source/_posts/helloword.md << EOF
---
title: Hello Word
date: 2018-12-17 23:03:29
tags: [program,hexo,default,none]
categories: [web,program]
sitemap: true
layout: false
---

Hello Word! This is My First Blog!

title -- 文章标题
date -- 文章的创建时间
tags -- 标签，可以指定一至多个
categories -- 分类，文章属于哪一类的。
sitemap -- 此文件是否包含在站点地图中
layout -- 是否进行网页渲染
EOF

# Method 2
:~$ echo '
---
title: TAGS
date: 2018-12-17 23:03:29
tags: 
    - program
    - hexo
    - default
    - none
categories:
    - web
    - program
---
' > hexo.md

SiteMap

Bing Webmaster
Google Webmaster
Baidu Webmaster

Create Sitemap.xml

站点地图是一种文件，您可以通过该文件列出您网站上的网页，从而将您网站内容的组织架构告知Google和其他搜索引擎。搜索引擎网页抓取工具会读取此文件，以便更加智能地抓取您的网站。

:~$ npm install hexo-generator-sitemap --save
:~$ echo '
# hexo-generator-sitemap
sitemap:
  path: sitemap.xml
  template: ./sitemap_template.xml
' >> _config.yml

sitemap_template.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/sitemap.xsl"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  {% for post in posts %}
  <url>
    <loc>https://xxx.xxx.com{{ post.permalink | uriencode }}</loc>
    {% if post.updated %}
    <lastmod>{{ post.updated.toISOString() }}</lastmod>
    {% elif post.date %}
    <lastmod>{{ post.date.toISOString() }}</lastmod>
    {% endif %}
  </url>
  {% endfor %}
</urlset>
' > sitemap_template.xml

source/sitemap.xsl

<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet version="2.0"
				xmlns="http://www.w3.org/1999/xhtml"
				xmlns:html="http://www.w3.org/TR/REC-html40"
				xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"
				xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
				xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9"
				xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
	<xsl:template match="/">
		<xsl:variable name="fileType">
			<xsl:choose>
				<xsl:when test="//sitemap:url">Sitemap</xsl:when>
				<xsl:otherwise>SitemapIndex</xsl:otherwise>
			</xsl:choose>
		</xsl:variable>
		<html xmlns="http://www.w3.org/1999/xhtml">
			<head>
				<title>
					<xsl:choose><xsl:when test="$fileType='Sitemap'">Sitemap</xsl:when>
						<xsl:otherwise>Sitemap Index</xsl:otherwise>
					</xsl:choose>
				</title>
				<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
				<style type="text/css">
					body {
						margin: 0;
						font-family: Helvetica, Arial, sans-serif;
						font-size: 68.5%;
					}
					#content-head {
						background-color: #4275f4;
						padding: 20px 40px;
					}
					#content-head h1,
					#content-head p,
					#content-head a {
						color: #fff;
						font-size: 1.2em;
					}
					#content-head h1 {
						font-size: 2em;
					}
					table {
						margin: 20px 40px;
						border: none;
						border-collapse: collapse;
					}
					table {
						font-size: 1em;
						width: 75%;
					}
					th {
						border-bottom: 1px solid #ccc;
						text-align: left;
						padding: 15px 5px;
						font-size: 14px;
					}
					td {
						padding: 10px 5px;
						border-left: 3px solid #fff;
					}
					tr.stripe {
						background-color: #f7f7f7;
					}
					table td a {
						display: block;
					}
					table td a img {
						max-height: 30px;
						margin: 6px 3px;
					}
				</style>
			</head>
			<body>
				<div id="content">
					<div id="content-head">
						<h1>XML Sitemap</h1>
						<p>Generated by <a href="https://semperplugins.com/all-in-one-seo-pack-pro-version/?loc=aio_sitemap" target="_blank">All in One SEO Pack</a>, this is an XML Sitemap, meant to be consumed by search engines like Google or Bing.<br/>
							You can find more information about XML sitemaps at <a href="http://sitemaps.org">sitemaps.org</a>.</p>
						<p><xsl:choose>
								<xsl:when test="$fileType='Sitemap'">
									This sitemap contains <xsl:value-of select="count(sitemap:urlset/sitemap:url)"></xsl:value-of> URLs.</xsl:when>
								<xsl:otherwise>This sitemap index contains <xsl:value-of select="count(sitemap:sitemapindex/sitemap:sitemap)"></xsl:value-of> sitemaps.</xsl:otherwise>
							</xsl:choose></p>
					</div>
					<xsl:choose>
						<xsl:when test="$fileType='Sitemap'">
							<xsl:call-template name="sitemapTable"/></xsl:when>
						<xsl:otherwise><xsl:call-template name="siteindexTable"/></xsl:otherwise>
					</xsl:choose>
				</div>
			</body>
		</html>
	</xsl:template>
	<xsl:template name="siteindexTable">
		<table cellpadding="3">
			<thead>
			<tr>
				<th width="50%">URL</th>
				<th>Last Change</th>
			</tr>
			</thead>
			<tbody>
			<xsl:variable name="lower" select="'abcdefghijklmnopqrstuvwxyz'"/>
			<xsl:variable name="upper" select="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/>
			<xsl:for-each select="sitemap:sitemapindex/sitemap:sitemap">
				<tr>
					<xsl:if test="position() mod 2 != 1">
						<xsl:attribute name="class">stripe</xsl:attribute>
					</xsl:if>
					<td>
						<xsl:variable name="itemURL">
							<xsl:value-of select="sitemap:loc"/>
						</xsl:variable>
						<a href="{$itemURL}">
							<xsl:value-of select="sitemap:loc"/>
						</a>
					</td>
					<td>
						<xsl:value-of select="concat(substring(sitemap:lastmod,0,11),concat(' ', substring(sitemap:lastmod,12,5)))"/>
					</td>
				</tr>
			</xsl:for-each>
			</tbody>
		</table>
	</xsl:template>
	<xsl:template name="sitemapTable">
		<xsl:variable name="sitemapType">
			<xsl:for-each select="/*/namespace::*">
				<xsl:if test="name()='video'">
					<xsl:choose>
						<xsl:when test="name()='video'">video</xsl:when>
					</xsl:choose>
				</xsl:if>
			</xsl:for-each>
		</xsl:variable>

		<table cellpadding="3">
			<thead>
			<tr>
				<th width="50%">URL</th>
			    <th>Images</th>
			    <th>Priority</th>
				<th>Change Frequency</th>
				<th>Last Change</th>
			</tr>
			</thead>
			<tbody>
			<xsl:variable name="lower" select="'abcdefghijklmnopqrstuvwxyz'"/>
			<xsl:variable name="upper" select="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/>
			<xsl:for-each select="sitemap:urlset/sitemap:url">
				<tr>
					<xsl:if test="position() mod 2 != 1">
						<xsl:attribute name="class">stripe</xsl:attribute>
					</xsl:if>
					<td>
						<xsl:variable name="itemURL">
							<xsl:value-of select="sitemap:loc"/>
						</xsl:variable>
						<a href="{$itemURL}">
							<xsl:value-of select="sitemap:loc"/>
						</a>
					</td>
					<td>
					    <xsl:value-of select="count(image:image)"/>
					</td>
					<td>
						<xsl:if test="string(number(sitemap:priority))!='NaN'">
							<xsl:value-of select="concat(sitemap:priority*100,'%')"/>
						</xsl:if>
					</td>
					<td>
						<xsl:value-of select="concat(translate(substring(sitemap:changefreq, 1, 1),concat($lower, $upper),concat($upper, $lower)),substring(sitemap:changefreq, 2))"/>
					</td>
					<td>
						<xsl:value-of select="concat(substring(sitemap:lastmod,0,11),concat(' ', substring(sitemap:lastmod,12,5)))"/>
					</td>
					<td>
					</td>
				</tr>
			</xsl:for-each>
			</tbody>
		</table>
	</xsl:template>
</xsl:stylesheet>

google/bing 收录我们的博客

register Bing webmaster/Google Webmaster
进行网站所有权验证

DNS验证，即在DNS域名解析中添加TXT记录
<meta>验证，即在网站主页上添加指定的<meta>标签
文件验证，将验证文件放在网站的根目录下

在sitemap下提交sitempa.xml

Baidu 收录我们的博客

因国内网站需要实名认证/备案，所以想使用百度站长工具需要注册[熊掌ID]，而[熊掌ID]需要实名认证，即上传手持身份证的照片。

如果我们不需要Baidu Webmaster所提数据图表功能，则可在链接提交上直接提交我们的网址即可，不用进行站点认证。

验证网站

为什么要验证网站
站长平台推荐站长添加主站（您网站的链接也许会使用www 和非 www 两种网址，建议添加用户能够真实访问到的网址），添加并验证后，可证明您是该域名的拥有者，可以快捷批量添加子站点，查看所有子站数据，无需再一一验证您的子站点。
如何验证网站
首先如果您的网站已使用了百度统计，您可以使用统计账号登录平台，或者绑定站长平台与百度统计账号，站长平台支持您批量导入百度统计中的站点，您不需要再对网站进行验证。
百度站长平台为未使用百度统计的站点提供三种验证方式：文件验证、html标签验证、CNAME验证。

验证完成后，将会认为您是网站的拥有者。为使您的网站一直保持验证通过的状态，请保留验证的文件、html标签或CNAME记录，会去定期检查验证记录。

如何选择链接提交方式

主动推送：最为快速的提交方式，推荐您将站点当天新产出链接立即通过此方式推送给百度，以保证新链接可以及时被百度收录。
自动推送：最为便捷的提交方式，请将自动推送的JS代码部署在站点的每一个页面源代码中，部署代码的页面在每次被浏览时，链接会被自动推送给百度。可以与主动推送配合使用。
sitemap：您可以定期将网站链接放到sitemap中，然后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap，对其中的链接进行处理，但收录速度慢于主动推送。
手动提交：一次性提交链接给百度，可以使用此种方式。

引用：viggoz

Hexo辅助函数#toc

{#################}
{### POST BODY ###}
{#################}
{% if toc(page.content).length > 1 %}
    {% set next_toc_number = theme.toc.number %}
    {% if page.toc_number !== undefined %}
        {% set next_toc_number = page.toc_number %}
    {% endif %}
    {% set next_toc_max_depth = page.toc_max_depth|default(theme.toc.max_depth)|default(6) %}
    {% set toc = toc(page.content,{list_number:false}) %}
    {% if toc.length > 1 %}
        <div class="post-toc-content">{{ toc }}</div>
    {% endif %}
{% endif %}

hexo-leancloud-counter-security踩过的坑

当你按照「leaferx教程」|「官方中文教程」去集成 hexo-leancloud-counter-security 插件时，一定要注意要先让 Counter 初始化成功后，再集成 [hexo-leancloud-counter-security][toc_github_leancloud] 插件，否则文章阅读次数的地方会显示 [ 未初始化 | Counter not initialized! More info at console err msg.]。

换句话说，先不开启 [hexo-leancloud-counter-security][toc_github_leancloud] 插件，当博客开始统计阅读次数后，再开启 [hexo-Leancloud-counter-security][toc_github_leancloud] 插件。

详细步骤即：

先按 leaferx教程到「3. 部署云引擎以保证访客数量不被随意篡改」

修改theme/next/_config.yml

leancloud_visitors:
  enable: true
  app_id: <<your app id>>
  app_key: <<your app key>>
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  security: false
  betterPerformance: false

生成博客,并浏览网页，
1
:~$ hexo g
查看文章的阅读次数是否正常统计，如果未正常显示，再仔细看看教程。
如果 leancloud 已成功运行，再选做「leaferx教程」的第4步「4. 进一步设置权限（可选，建议设置）」
生成博客
1
:~$ hexo g
生成 leancloud 本地数据库 leancloud.memo，并与 leancloud网站 合并数据库。
1
:~$ hexo d
此时source 和 public 目录下全部生成了 leancloud.memo 文件，

Prefence:
Hexo-Web
Hexo-Github
Alan’s Blog
leaferx’s Blog