波尔克

置顶 | 发表于 | 分类于 ， | 浏览: | 字数: 3.4k | 时长 ≈ 14 分钟

波尔克#

（谐音“博儿客”）

介绍#

个人网站用了有四年了，期间一直都是用PHP+MySql的方式部署在阿里云，从备案域名折腾服务器，到调试各种插件，从制定学习计划，到学课程，又是边写文章边研究Markdown排版，种种事情花了很大功夫。今年1月份发生了一件事情——服务器到期，那会儿工作忙一直拖着续费的事情。阿里清空了磁盘，我也是事后才注意到通知短信，发现网站的文章数据全丢的那一刻，整个人浑身感觉都不好了。

痛定思痛，决定文章还是要继续写，写哪里呢CSDN、博客园、简书、掘金都只适合当存档的地方，毕竟没有个人网站用起来有感情。想起来之前工作的时候，为了写音视频直播学了Node，注意过Hexo框架，这个框架可以快速搭个人网站。哎哟不错哦，一拍大腿说干就干。谁让咱是行动派！

最终我花了一天时间，使用码云仓库+Hexo搭一个小型静态网站。优点是：免费，简单，便捷，最大优点是动静分离，静态资源放国内仓库，占磁盘空间的图片资源放CDN服务器，通过域名转发访问，加载效率杠杠滴。

这篇文章主要包含了个人网站的技术架构和常见问题。包括使用的oss管理平台、域名管理、评论管理、文章编辑与发布、网站编辑管理等功能的设计与实现。

网站架构#

名称 用途
typora markdown编辑器
hexo 博客服务
nodejs hexo编译环境
gitee 码云代码仓库
next hexo主题
七牛云 oss图片文件仓库
阿里云域名 域名转发、cdn转发
hexo-toc 文档插件显示二级目录，响应点击事件
hexo-admin 管理后台
hexo-wordcount 统计字数
hexo-renderer-markdown-it-plus markdown解析插件
leanclound 阅读量统计插件，如何配置参考文章
gitment git评论云
haoyuePlayer 音乐播放
aplayer 音乐播放
baidu_push 文章推送
rating 评分
calendar 日历
live2d 看板娘
Mpic 图床发布工具，自动发布七牛
Carouscl 轮播图功能使用了Boostarp-Carouscl
valine-admin 评论云
hexo-related-popular-posts 文章推荐
widgetpack 文章评分
firestore top排行
hexo-generator-index 分页
hexo-generator-archive 分页
hexo-generator-category 分页
hexo-generator-tag 分页
hexo-wordcount 字数与阅读时间
gulp 压缩代码
hexo-theme-Wikitten 文件树预览
hexo-directory-category 自定义分类页
hexo-statistics-charts 静态图表统计post、tags
hexo-online-server 在线编辑文章、页面、发布
hexo-photoswipe 滑动轮播点击图片展示器
giteement 评论云

模板架构#

模板名称 用途
android-xx-Tips Android百问百答模板
book-note-model 读书笔记模板
draft 草稿模板
page 页面模板
post 文章模板

安装教程#

nodejs安装教程#

步骤太简单了，难点就是找到合适版本、合适渠道的安装包，推荐国内使用方式2node中文网的方式下载安装

方式 缺点 优点
nvm 需要学习指令 效率高，切换node版本快
node官网，点击链接下载，一路next同意协议安装 国外服务器下载慢 最新安装包
node中文网，点击链接下载，一路next同意协议安装 安装包版本落后1-2个版本 国内服务器下载快

下面简单介绍nvm用法

  1. 点击nvm官网，找到最新版本下载nvm.exe
  2. 点击安装，一路next
  3. 查看可用的node版本 nvm list available,另外可以在node官网查看所有的node版本
  4. 安装指定node版本，nvm install 12.22.11
  5. 使用指定node版本，nvm use 12.22.11

命令行正确输出，表明我们安装成功了。

码云配置网站教程#

git使用教程#

hexo使用教程#

hexo官网有详细步骤，小白可以参考百度上的安装教程博客

方式 步骤 缺点 优点
hexo官网，权威hexo安装步骤 npm install -g hexo-cli； 不适合小白用户，命令行操作居多 简洁，明了，歧义少
搜索引擎“hexo安装步骤” 《参考》 遇到问题较难解答 傻瓜式，上手快

下面介绍hexo最速安装方式

  1. 安装hexo-cli， npm install -g hexo-cli -registry=https://registry.npm.taobao.org
  2. 安装hexo,npm install hexo -registry=https://registry.npm.taobao.org
  3. 启动指定的hxo项目，hexo s

hexo常见指令#

指令 用途
hexo init 在当前目录下创建工程
_config.yml deploy: type: git repository: git@github.com:liuxianan/liuxianan.github.io.git branch: master
hexo clean 清除缓存
hexo g 生成web
hexo s 启动web服务并预览，在浏览器输入 http://localhost:4000
hexo d 发布pulic 目录下的静态页面至github
git clone url themes/yilia 下载指定主题到根目录/thems/yilia/ 下
hexo new “postName” 新建文章，hexo n
hexo new page “pageName” #新建页面
hexo generate 生成静态页面至public目录，hexo g
hexo server 开启预览访问端口（默认端口4000，’ctrl + c’关闭server）
hexo deploy hexo d
hexo s -g 生成并本地预览

markdwon使用技巧#

更多markdwon技巧可以移步至我的Typora知识Wiki

缩放图片四种种技巧#

1
2
3
4
<img src="" width="50%" height="50%">
![test image size](url){:class="img-responsive"}
![test image size](url){:height="50%" width="50%"}
![test image size](url){:height="100px" width="400px"}

设置字体颜色#

1
<label style="color:green">**数学日记**</label>

使用数学公式#

文档名称 优点
KaTeX公式文档 网站清新，简洁，数学公式非常全，导航详细
CTEX公式文档 导航较为隐晦，除了数学公式外还有其他公式

markdown设置表格宽度#

1
2
3
4
| a | b | d |
|---|---|---|
| 1 | <div style="width: 150pt">very very very very very lonng long long long long text</div>| 3 |

1
<div style="width: 150pt">  <div style="width: 50%">  ..

markdown如何换行#

markdown表格内换行需要使用<br>

markdown如何开启数学公式#

1.开启行内公式模块，默认是关闭的。

文件—>偏好设置—>Markdown,勾选内联公式，重启typora。

使用方式参考latext文档

markdown设置字体颜色#

HTML方式：

1
　<font color='red'> text </font>

效果：　 text

KaTex/MathJax方式:

1
$\color{red}{红色字}$

效果：$\color{red}{红色字}$

markdown如何等比缩放图片#

在img标签里面只设置宽，不设置高，图片就会等比例缩放。

常见问题#

如何搭建一个wiki页面#

参考我的如何做一篇wiki

码云部署hexo站点 css样式不显示？#

原因：仓库地址与个性地址url不一致
解决：修改_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    url: https://ipvb.gitee.io/blog
    root: /blog
    ​```

其他码云部署的问题参考[这里](https://gitee.com/help/articles/4136#article-header3)

## hexo如何缩放图片

`<img src="" width="50%" height="50%">`

## hexo如何安装主题

1. 找到合适的主题列表，推荐以下2个：

   [有哪些好看的 Hexo 主题？](https://www.zhihu.com/question/24422335)

   [hexo.thems](https://hexo.io/themes/)

2. 安装主题至根目录，例如找到next主题，将其克隆岛根目录/thesms/next下

    ```js
     git clone https://github.com/iissnan/hexo-theme-next themes/next

  1. 阅读next文档

    1. 引用主题：在config.yml中修改主题名称：theme: next
    2. 发布时遇到 bug{% extends '_layout.swig' %}；输入指令解决：npm i hexo-renderer-swig

hexo不显示二级目录？#

原因：hexo解析目录是按照1级，1级下面找2级，2级下面找3级的顺序查找目录的，如果只有2级，没有1级，是会显示错误的。

解决：先写1级标题，再写2级标题，先写大标题，再写小标题。

原因：markdown解析问题

解决：参考渲染错误解决和超链接乱码解决方案、参考markdown-it的bug

hexo点击二级目录不跳转?#

原因：markdown解析问题

解决：参考渲染错误解决和超链接乱码解决方案、参考markdown-it的bug

hexo自动发布图片至七牛云？#

阿里云-域名管理-解析设置-添加记录-设置以下参数

键 值
记录类型 CNAME
主机记录 如cdn
记录值 从七牛云后台获取

七牛云-域名管理-加速域名设置值如cdn.yangchaofan.cn；cdn就是主机记录值；创建完毕后，获得一个CNAME值，记住该值，填写至阿里云域名记录值中。

next如何打开百度分享？#

主题文件中插入以下代码

1
2
3
baidushare:
  type: button
  baidushare: true

next如何添加搜索功能？#

安装插件

1
npm install hexo-generator-searchdb --save

编辑全局配置

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置

1
2
local_search:
  enable: true

next如何添加评论功能？#

翻墙打开来比力官网，注册填写域名，copy代码块中的data-uid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="这里是id">
	<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
	</script>
<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->

配置完成后可以在评论后台管理评论内容。

next如何安装valine#

1
npm install valine --save

next配置gitment#

Hexo 博客接入 Gitment 评论系统踩坑

认证重定向错误

next如何添加置顶功能？#

1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

文章插入top属性，top数值按大小倒序排序

1
2
3
4
title: 置顶
date: 2019-09-09 09:09:09
top: true
top: 1

设置置顶样式：

打开：/blog/themes/next/layout/_macro目录下的post.swig文件，定位到<div class="post-meta">标签下，插入如下代码：

1
2
3
4
5
6
7
8
<div class="post-meta">
          <span class="post-time">
在此之下插入代码，包含在 span块内        
          {% if post.top %}
            <i class="fa fa-thumb-tack"></i>
            <font color=7D26CD>置顶</font>
            <span class="post-meta-divider">|</span>
          {% endif %}

next如何跳转至站内相对路径？#

hexo如何创建模板？#

模板有什么用？

模板可以当做一类文章的格式，按照指定格式批量创建文章，减少重复内容的编写工作。如创建读书笔记模板、创建一类任务计划模板。

创建模板步骤？

  • 新建md文件，文件头插入以下内容，并将文件移动至根目录/scaffolds 下
1
2
3
4
5
title: 《超效学习方法解码》心得
date: 2021-02-17 11:37:23
entitle:
tags:
categories:
  • 使用指令读取模板创建文章
1
2
# hexo new 模板名称 "title"
hexo new book-note-model "《超效学习方法解码》心得"

hexo如何创建草稿？#

草稿的用途？

文章写到一半，未完成，并不想发布。可以向存到指定位置。hexo提供了_drafts目录存放草稿。

创建草稿的步骤？

  • 创建草稿
1
2
3
4
5
6
# hexo new draft "title"
hexo new draft "Android性能优化百问百答"
INFO  Validating config
INFO  Created: 
D:\workspace\gitblog\hexoblogcode\source\_drafts\Android性能优化百问百答.md

  • 发布草稿
1
2
3
4
5
# hexo publish 布局类型 "title"
hexo publish draft "Android性能优化百问百答"
INFO  Validating config
INFO  Published: D:\workspace\gitblog\hexoblogcode\source\_posts\Android性能优化百问百答.md

next文章自适应屏幕宽度#

\themes\next\source/css/_schemes/Picses/_layout.styl在文件末尾添加代码

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
35
// 以下为新增代码！！修改post宽度
header{ width: 80% !important; }
header.post-header {
  width: auto !important;
}
.container .main-inner { width: 80%; }
.content-wrap { width: calc(100% - 260px); }

.header {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.container .main-inner {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.content-wrap {
  +tablet() {
    width: 100% !important;
  }
  +mobile() {
    width: 100% !important;
  }
}

next添加头像#

打开themes/next/_config.yml

打开并放入头像/themes/next/source/images/

1
avatar: /images/avatar_2.gif

next统计字数#

1
pm i --save hexo-wordcount

在站点配置文件添加如下配置

# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true         #文章字数统计
  min2read: true          #文阅读时长
  totalcount: false       
  separated_meta: true

在NexT主题配置文件添加如下配置（NexT主题已支持该插件，有的话无需再添加）

# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true         #文章字数统计
  min2read: true          #文阅读时长
  totalcount: false       
  separated_meta: true

next不蒜子失效问题#

hexo-theme-next主题中使用了dn-lbstatics.qbox.me域名的文件位置为：

1
themes\next\layout\_third-party\analytics\busuanzi-counter.swi

找到如下代码：

1
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

修改为：

1
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

使用说明#

  1. 定时使用typora编写markdown文章：编写markdown文件
  2. 导出成html，发布在hexo：使用hexo s
  3. hexo推送到码云指定仓库地址：hexo d
  4. 将阿里云的域名解析至码云仓库地址：配置域名解析
  5. 通过公网域名访问我的网站

支持#

  1. typora使用手册
  2. Gitee 官方提供的使用手册
  3. 七牛云
  4. 阿里云
  5. hexo中文文档
  6. next中文文档
  7. leanclound统计云
  8. 来比力评论云
  9. 快站畅言
-------------------本文结束 感谢您的阅读-------------------