内容简介:如果你和我一样是小白,那么恭喜你!看完这篇文章,你也可以拥有一个这样的博客啦!至此,您的Hexo博客已经搭建在本地。
如果你和我一样是小白,那么恭喜你!
看完这篇文章,你也可以拥有一个这样的博客啦!
前言
- 欢迎在文末留言,或者点击加入QQ群933583982互相交流。
- 本文采用CC BY-NC-SA 4.0 许可协议,转载请注明出处!
- 【持续更新】链接: www.simon96.online/2018/10/12/…
博客搭建
准备环境
-
Node.js 下载,并安装。详细步骤: www.simon96.online/2018/11/10/…
-
Git 下载,并安装。详细步骤: www.simon96.online/2018/11/10/…
-
安装Hexo,在命令行(即Git Bash)运行以下命令:
npm install -g hexo-cli
-
初始化Hexo,在命令行(即Git Bash)依次运行以下命令即可:
以下,即存放Hexo初始化文件的路径, 即站点目录。
$ hexo init <folder> $ cd <folder> $ npm install 复制代码
新建完成后,在路径下,会产生这些文件和文件夹:
. ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes 复制代码
注:
-
hexo相关命令均在 站点目录 下,用 Git Bash 运行。
-
站点配置文件:站点目录下的
_config.yml
。 路径为
<folder>\_config.yml
-
主题配置文件:站点目录下的
themes
文件夹下的,主题文件夹下的_config.yml
。 路径为
<folder>\themes\<主题文件夹>\_config.yml
-
-
启动服务器。在路径下,命令行(即Git Bash)输入以下命令,运行即可:
hexo server
-
浏览器访问网址:
http://localhost:4000/
至此,您的Hexo博客已经搭建在本地。
实施方案
方案一:GithubPages
-
创建 Github 账号
-
创建仓库, 仓库名为:<Github账号名称>.github.io
-
将本地Hexo博客推送到GithubPages
3.1. 安装
hexo-deployer-git
插件。在命令行(即Git Bash)运行以下命令即可:$ npm install hexo-deployer-git --save 复制代码
3.2. 添加SSH key。
-
创建一个 SSH key 。在命令行(即Git Bash)输入以下命令, 回车三下即可:
$ ssh-keygen -t rsa -C "邮箱地址" 复制代码
-
添加到 github。 复制密钥文件内容(路径形如
C:\Users\Administrator\.ssh\id_rsa.pub
),粘贴到 New SSH Key 即可。 -
测试是否添加成功。在命令行(即Git Bash)依次输入以下命令,返回“You've successfully authenticated”即成功:
$ ssh -T git@github.com $ yes 复制代码
3.3. 修改
_config.yml
(在站点目录下)。文件末尾修改为:# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: git@github.com:<Github账号名称>/<Github账号名称>.github.io.git branch: master 复制代码
注意:上面仓库地址写ssh地址,不写http地址。
3.4. 推送到GithubPages。在命令行(即Git Bash)依次输入以下命令, 返回
INFO Deploy done: git
即成功推送:$ hexo g $ hexo d 复制代码
-
-
等待1分钟左右,浏览器访问网址:
https://<Github账号名称>.github.io
至此,您的Hexo博客已经搭建在GithubPages, 域名为 https://<Github账号名称>.github.io
。
方案二:GithubPages + 域名
在方案一的基础上,添加自定义域名(您购买的域名)。
-
域名解析。
类型选择为 CNAME;
主机记录即域名前缀,填写为www;
记录值填写为自定义域名;
解析线路,TTL 默认即可。
-
仓库设置。
2.1. 打开博客仓库设置:
https://github.com/<Github账号名称>/<Github账号名称>.github.io/settings
2.2. 在Custom domain下,填写自定义域名,点击
save
。2.3. 在站点目录的
source
文件夹下,创建并打开CNAME.txt
,写入你的域名(如www.simon96.online
),保存,并重命名为CNAME
。 -
等待10分钟左右。
浏览器访问自定义域名。
至此,您的Hexo博客已经解析到自定义域名,
https://<Github账号名称>.github.io
依然可用。
方案三:GithubPages + CodingPages + 域名
GithubPages 在国内较慢,百度不收录,而CodingPages 在国外较快。所以在方案二的基础上,添加CodingPages 。
-
创建 Coding 账号
-
创建仓库, 仓库名为:<Coding账号名称>
-
进入项目里『代码』页面,点击『一键开启静态 Pages』,稍等片刻CodingPages即可部署成功。
-
将本地Hexo博客推送到CodingPages
4.1. 鉴于创建GithubPages 时,已经生成过公钥。可直接复制密钥文件内容(路径形如
C:\Users\Administrator\.ssh\id_rsa.pub
), 粘贴到新增公钥。4.2. 测试是否添加成功。在命令行(即Git Bash)依次输入以下命令,返回“You've successfully authenticated”即成功:
$ ssh -T git@git.coding.net $ yes 复制代码
4.3. 修改
_config.yml
(在存放Hexo初始化文件的路径下)。文件末尾修改为:# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: - type: git repo: git@github.com:<Github账号名称>/<Github账号名称>.github.io.git branch: master - type: git repo: git@git.dev.tencent.com:<Coding账号名称>/<Coding账号名称>.git branch: master 复制代码
4.4. 推送到GithubPages。在命令行(即Git Bash)依次输入以下命令, 返回
INFO Deploy done: git
即成功推送:$ hexo g $ hexo d 复制代码
-
域名解析
-
添加 CNAME 记录指向 <Coding账号名称>.coding.me
类型选择为 CNAME;
主机记录即域名前缀,填写为www;
记录值填写为自定义域名;
解析线路,TTL 默认即可。
-
添加 两条A 记录指向 192.30.252.153和192.30.252.154
类型选择为 A;
主机记录即域名前缀,填写为@;
记录值填写为192.30.252.153和192.30.252.154;
解析线路,境外或谷歌。
-
在『Pages 服务』设置页(
https://dev.tencent.com/u/<Coding账号名称>/p/<Coding账号名称>/git/pages/settings
)中绑定自定义域名。
-
至此,您的Hexo博客已经解析到自定义域名, https://<Github账号名称>.github.io
和 https://<Coding账号名称>.coding.me
依然可用。
方案四:云服务器 + 域名
该方案需要先购买云服务器和域名。
-
在云服务器安装Git 和 Nginx。(Git 用于版本管理和部署,Nginx 用于静态博客托管。)
登陆root用户,运行:
$ yum -y update $ yum install -y git nginx 复制代码
-
Nginx配置
2.1. 创建文件目录(用于博客站点文件存放)
cd /usr/local/ mkdir hexo chmod 775 -R /usr/local/hexo/ 复制代码
2.2. 添加 index.html(用于检测配置 Nginx 是否成功)
vim /usr/local/hexo/index.html 复制代码
添加以下代码,并保存。
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> </head> <body> <p>Nginx running</p> </body> </html> 复制代码
2.3. 配置 Nginx 服务器
vim /etc/nginx/nginx.conf 复制代码
修改server_name和root:
server { listen 80 default_server; listen [::]:80 default_server; server_name www.baidu.com; # 填个人域名 root /usr/local/hexo/; } 复制代码
2.4. 启动nginx服务;
service nginx start 复制代码
2.5. 云服务器浏览器访问个人域名或IP,若跳转index.html,则配置完成,否则检查以上配置。
-
git配置
3.1. 创建文件目录, 用于私人 Git 仓库搭建, 并更改目录读写权限。
cd /usr/local/ mkdir hexoRepo chmod 775 -R /usr/local/hexoRepo/ 复制代码
3.2. Git 初始化裸库。
cd hexoRepo/ git init --bare hexo.git 复制代码
3.3. 创建 Git 钩子(hook)。
vim /usr/local/hexoRepo/hexo.git/hooks/post-receive 复制代码
3.4. 输入以下信息,用于指定 Git 的源代码 和 Git 配置文件。
#!/bin/bash git --work-tree=/usr/local/hexo --git-dir=/usr/local/hexoRepo/hexo.git checkout -f 复制代码
3.5. 保存并退出后, 给该文件添加可执行权限。
chmod +x /usr/local/hexoRepo/hexo.git/hooks/post-receive 复制代码
-
本地博客推送到云服务器
4.1. 安装
hexo-deployer-git
插件。在命令行(即Git Bash)运行以下命令即可:$ npm install hexo-deployer-git --save 复制代码
4.2. 添加SSH key。
-
创建一个 SSH key 。在命令行(即Git Bash)输入以下命令, 回车三下即可:
$ ssh-keygen -t rsa -C "邮箱地址" 复制代码
-
添加到 github。 复制密钥文件内容(路径形如
C:\Users\Administrator\.ssh\id_rsa.pub
),粘贴到 New SSH Key 即可。 -
测试是否添加成功。在命令行(即Git Bash)依次输入以下命令,返回“You've successfully authenticated”即成功:
$ ssh -T git@github.com $ yes 复制代码
4.3. 修改
_config.yml
(在站点目录下)。文件末尾修改为:# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: root@xxx.xxx.xxx.xxx:/usr/local/hexoRepo/hexo //用户名@域名或 IP 地址:/usr/local/hexoRepo/hexo branch: master 复制代码
注意:上面仓库地址写ssh地址,不写http地址。
4.4. 推送到GithubPages。在命令行(即Git Bash)依次输入以下命令, 返回
INFO Deploy done: git
即成功推送:$ hexo g $ hexo d 复制代码
-
-
等待1分钟左右,浏览器访问个人域名。
至此,您的Hexo博客已经搭建在云服务器, 域名为个人域名。
主题优化
选择主题
Hexo默认的主题是landscape,推荐以下主题:
应用主题
themes _config.yml
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: <主题文件夹的名称> 复制代码
主题优化
以上主题都有比较详细的说明文档,本节主要解决主题优化的常见问题。
主题优化一般包括:
-
设置「RSS」
-
添加「标签」页面
-
添加「分类」页面
-
设置「字体」
问题:引用国外字体镜像较慢。
解决:可以改用国内的。将\themes\*\layout_partials\head external-fonts.swig文件中fonts.google.com改成fonts.lug.ustc.edu.cn 。
-
设置「代码高亮主题」
-
侧边栏社交链接
问题:图标哪里找?
解决:Font Awesome
-
开启打赏功能
问题:微信支付宝二维码不美观,规格不一。
解决:在线生成二维码
-
设置友情链接
-
腾讯公益404页面
-
站点建立时间
-
订阅微信公众号
-
设置「动画效果」
问题:慢,需要等待 JavaScript 脚本完全加载完毕后才会显示内容。 解决:将主题配置文件
_config.yml
中,use_motion字段的值设为false
来关闭动画。 -
设置「背景动画」
主题优化还包括:
添加背景图
在 themes/*/source/css/_custom/custom.styl 中添加如下代码:
body{ background:url(/images/bg.jpg); background-size:cover; background-repeat:no-repeat; background-attachment:fixed; background-position:center; } 复制代码
修改Logo字体
在 themes/*/source/css/_custom/custom.styl
中添加如下代码:
@font-face { font-family: Zitiming; src: url('/fonts/Zitiming.ttf'); } .site-title { font-size: 40px !important; font-family: 'Zitiming' !important; } 复制代码
其中字体文件在 themes/next/source/fonts
目录下,里面有个 .gitkeep
的隐藏文件,打开写入你要保留的字体文件,比如我的是就是写入 Zitiming.ttf
,具体字库自己从网上下载即可。
修改内容区域的宽度
编辑主题的 source/css/_variables/custom.styl
文件,新增变量:
// 修改成你期望的宽度 $content-desktop = 700px // 当视窗超过 1600px 后的宽度 $content-desktop-large = 900px 复制代码
网站标题栏背景颜色
.site-meta { background: $blue; //修改为自己喜欢的颜色 } 复制代码
自定义鼠标样式
打开 themes/*/source/css/_custom/custom.styl
,在里面写下如下代码:
// 鼠标样式 * { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important } :active { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important } 复制代码
文章加密访问
打开 themes/*/layout/_partials/head.swig
文件,在 {% if theme.pace %}
标签下的 {% endif %}
之前插入代码:
<script> (function(){ if('{{ page.password }}'){ if (prompt('请输入密码') !== '{{ page.password }}'){ alert('密码错误'); history.back(); } } })(); </script> 复制代码
写文章时加上 password: *
:
--- title: 2018 date: 2018-10-25 16:10:03 password: 123456 --- 复制代码
实现点击出现桃心效果
- 在
/themes/*/source/js/src
下新建文件click.js
,接着把以下粘贴到click.js
文件中。 代码如下:
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document); 复制代码
- 在
\themes\*\layout\_layout.swig
文件末尾添加:
<!-- 页面点击小红心 --> <script type="text/javascript" src="/js/src/clicklove.js"></script> 复制代码
静态资源压缩
在站点目录下:
$ npm install gulp -g 复制代码
安装gulp插件:
npm install gulp-minify-css --save npm install gulp-uglify --save npm install gulp-htmlmin --save npm install gulp-htmlclean --save npm install gulp-imagemin --save 复制代码
在 Hexo
站点下新建 gulpfile.js
文件,文件内容如下:
var gulp = require('gulp'); var minifycss = require('gulp-minify-css'); var uglify = require('gulp-uglify'); var htmlmin = require('gulp-htmlmin'); var htmlclean = require('gulp-htmlclean'); var imagemin = require('gulp-imagemin'); // 压缩css文件 gulp.task('minify-css', function() { return gulp.src('./public/**/*.css') .pipe(minifycss()) .pipe(gulp.dest('./public')); }); // 压缩html文件 gulp.task('minify-html', function() { return gulp.src('./public/**/*.html') .pipe(htmlclean()) .pipe(htmlmin({ removeComments: true, minifyJS: true, minifyCSS: true, minifyURLs: true, })) .pipe(gulp.dest('./public')) }); // 压缩js文件 gulp.task('minify-js', function() { return gulp.src(['./public/**/.js','!./public/js/**/*min.js']) .pipe(uglify()) .pipe(gulp.dest('./public')); }); // 压缩 public/demo 目录内图片 gulp.task('minify-images', function() { gulp.src('./public/demo/**/*.*') .pipe(imagemin({ optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级) progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片 interlaced: false, //类型:Boolean 默认:false 隔行扫描gif进行渲染 multipass: false, //类型:Boolean 默认:false 多次优化svg直到完全优化 })) .pipe(gulp.dest('./public/uploads')); }); // 默认任务 gulp.task('default', [ 'minify-html','minify-css','minify-js','minify-images' ]); 复制代码
只需要每次在执行 generate
命令后执行 gulp
就可以实现对静态资源的压缩,压缩完成后执行 deploy
命令同步到服务器:
hexo g gulp hexo d 复制代码
修改访问URL路径
默认情况下访问URL路径为: domain/2018/10/18/关于本站
,修改为 domain/About/关于本站
。 编辑 Hexo
站点下的 _config.yml
文件,修改其中的 permalink
字段:
permalink: :category/:title/ 复制代码
博文置顶
-
安装插件
npm install hexo-generator-index-pin-top --save
然后在需要置顶的文章的Front-matter中加上top即可:
--- title: 2018 date: 2018-10-25 16:10:03 top: 10 --- 复制代码
- 设置置顶标志
打开:/themes/*/layout/_macro/post.swig,定位到
,插入以下代码即可:
{% if post.top %} <i class="fa fa-thumb-tack"></i> <font color=7D26CD>置顶</font> <span class="post-meta-divider">|</span> {% endif %} 复制代码
在右上角或者左上角实现fork me on github
- 选择样式 GitHub Ribbons ,
- 修改图片跳转链接,将
<a href="https://github.com/you">
中的链接换为自己Github链接: - 打开
themes/next/layout/_layout.swig
文件,把代码复制到<div class="headband"></div>
下面。
主页文章添加边框阴影效果
打开 themes/*/source/css/_custom/custom.styl
,向里面加代码:
// 主页文章添加阴影效果 .post { margin-top: 0px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); } 复制代码
显示当前浏览进度
修改 themes/*/_config.yml
,把 false
改为 true
:
# Back to top in sidebar b2t: true # Scroll percent label in b2t button scrollpercent: true 复制代码
创建分类页
在终端窗口下,定位到 Hexo
站点目录下,新建:
$ cd <站点目录> $ hexo new page categories 复制代码
加入 广告
主要有两种:百度SSP和谷歌Adsense。方法类似:
-
注册,复制广告代码
-
部署到网站。
2.1. 新建
theme/*/layout/_custom/google_ad.swig
,将 AdSense 上的代码粘贴进去2.2. 头部。在
theme/*/layout/_custom/head.swig
中也粘贴一份2.3. 每篇博客。在
theme/*/layout/post.swig
里中在希望看到的地方加上:{% include '_custom/google_ad.swig' %} 复制代码
例如:在
<div id="posts" class="posts-expand"> </div>
中间插入,总代码如下:{% block content %} <div id="posts" class="posts-expand"> {{ post_template.render(page) }} {% include '_custom/google_ad.swig' %} </div> {% endblock %} 复制代码
-
等待审核通过。如果失败,可再次申请。
添加萌萌哒
-
安装插件
npm install --save hexo-helper-live2d 复制代码
-
复制你喜欢的模型名字:
Epsilon2.1
Gantzert_Felixander
haru
miku
ni-j
nico
nietzche
nipsilon
nito
shizuku
tsumiki
wanko
z16
hibiki
koharu
haruto
Unitychan
tororo
hijiki
-
将以下代码添加到主题配置文件
_config.yml
,修改<你喜欢的模型名字>:live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false log: false model: use: live2d-widget-model-<你喜欢的模型名字> display: position: right width: 150 height: 300 mobile: show: true 复制代码
-
建配置文件
4.1. 在站点目录下建文件夹
live2d_models
,4.2. 再在
live2d_models
下建文件夹<你喜欢的模型名字>
,4.3. 再在
<你喜欢的模型名字>
下建json文件:<你喜欢的模型名字>.model.json -
安装模型。在命令行(即Git Bash)运行以下命令即可:
npm install --save live2d-widget-model-<你喜欢的模型名字>
-
在命令行(即Git Bash)运行以下命令, 在
http://127.0.0.1:4000/
查看测试结果:hexo clean && hexo g && hexo s
插件配置
以下插件(评论系统、数据统计与分析、内容分享服务、搜索服务)各选一个即可。
评论系统
推荐指数 | 优点 | 缺点 | |
---|---|---|---|
Valine | 4 | 每天30000条评论,10GB的储存 | 作者评论无标识 |
来必力/livere | 4 | 多种账号登录 | 评论无法导出 |
畅言 | 3 | 美观 | 必须备案域名 |
gitment | 3 | 简洁 | 只能登陆github评论 |
Disqus | 1 | 需要翻*墙 |
Valine
1.1. 获取APP ID 和 APP Key
请先登录或注册LeanCloud, 进入控制台后点击左下角创建应用,
进入刚刚创建的应用,选择左下角的 设置
> 应用Key
,然后就能看到你的 APP ID
和 APP Key
了。
1.2. 填写APP ID 和 APP Key到主题配置文件 _config.yml
1.3. 运行 hexo g&&hexo d
推送到博客。
来必力/livere
2.1. 登陆来必力 获取你的 LiveRe UID。
2.2. 填写LiveRe UID到主题配置文件 _config.yml
畅言
3.1.获取APP ID 和 APP Key
请先登录或注册畅言, 点击“立即免费获取畅言”,
新建站点,点击管理,点击评论插件>评论管理,
点击后台总览,然后就能看到你的 APP ID
和 APP Key
了。
3.2. 填写APP ID 和 APP Key到主题配置文件 _config.yml
3.3. 运行 hexo g&&hexo d
推送到博客。
gitment
4.1. 安装插件:
npm i --save gitment
4.2. 申请应用
在 New OAuth App 为你的博客应用一个密钥:
Application name:随便写 Homepage URL:这个也可以随意写,就写你的博客地址就行 Application description:描述,也可以随意写 Authorization callback URL:这个必须写你的博客地址 复制代码
4.3. 配置
编辑主题配置文件 themes/*/_config.yml
:
# Gitment # Introduction: https://imsun.net/posts/gitment-introduction/ gitment: enable: true mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway count: true # Show comments count in post meta area lazy: false # Comments lazy loading with a button cleanly: false # Hide 'Powered by ...' on footer, and more language: # Force language, or auto switch by theme github_user: {you github user id} github_repo: 公开的git仓库,评论会作为那个项目的issue client_id: {刚才申请的ClientID} client_secret: {刚才申请的Client Secret} proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect redirect_protocol: # Protocol of redirect_uri with force_redirect_pro 复制代码
Disqus
编辑 主题配置文件 themes/*/_config.yml
, 将 disqus 下的 enable 设定为 true,同时提供您的 shortname。count 用于指定是否显示评论数量。
disqus: enable: false shortname: count: true 复制代码
数据统计与分析
推荐指数 | 优点 | 缺点 | |
---|---|---|---|
不蒜子 | 4 | 可直接将访问次数显示在您在网页上(也可不显示) | 只计数 |
百度统计 | 3 | 收录慢 |
不蒜子
编辑 主题配置文件 themes/*/_config.yml
中的 busuanzi_count
的配置项即可。
- 当
enable: true
时,代表开启全局开关。 - 若
site_uv
(本站访客数)、site_pv
(本站访客数)、page_pv
(本文总阅读量)的值均为false
时,不蒜子仅作记录而不会在页面上显示。
注意:
不蒜子官方因七牛强制过期原有的『dn-lbstatics.qbox.me』域名(预计2018年10月初),与客服沟通数次无果,即使我提出为此付费也不行,只能更换域名到『busuanzi.ibruce.info』! 复制代码
解决办法:
-
找到主题调用不蒜子的swig文件。一般在"\themes*\layout_third-party\analytics\busuanzi-counter.swig"
-
更改域名
把原有的: <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script> 域名改一下即可: <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> 复制代码
百度统计
- 登录百度统计,定位到站点的代码获取页面
- 复制统计脚本 id,如图:
- 编辑 主题配置文件
themes/*/_config.yml
,修改字段google_analytics
,值设置成你的统计脚本 id。
内容分享服务
推荐指数 | 优点 | 缺点 | |
---|---|---|---|
百度分享 | 4 | 稳定 | 不太美观 |
need-more-share2 | 4 | 美观 | 更新不及时(比如微信分享API) |
百度分享
编辑 主题配置文件,添加/修改字段 baidushare
,值为 true
即可。
# 百度分享服务 baidushare: true 复制代码
need-more-share2
编辑 主题配置文件,添加/修改字段 needmoreshare2
,值为 true
即可。
needmoreshare2: enable: true 复制代码
搜索服务
推荐指数 | 优点 | 缺点 | |
---|---|---|---|
Local Search | 4 | 配置方便 | |
Swiftype | 2 | 需注册 | |
Algolia | 2 | 需注册 |
Local Search
添加百度/谷歌/本地 自定义站点内容搜索
-
安装
hexo-generator-searchdb
,在站点的根目录下执行以下命令:$ npm install hexo-generator-searchdb --save 复制代码
-
编辑 站点配置文件,新增以下内容到任意位置:
search: path: search.xml field: post format: html limit: 10000 复制代码
-
编辑 主题配置文件,启用本地搜索功能:
# Local search local_search: enable: true 复制代码
错误分析
如果你使用Hexo遇到同样的问题,这里有一些常见问题的解决方案。
YAML Parsing Error
JS-YAML: incomplete explicit mapping pair; a key node is missed at line 18, column 29: last_updated: Last updated: %s 复制代码
- 参数中包含冒号,请用加引号,如
Last updated: %s
JS-YAML: bad indentation of a mapping entry at line 18, column 31: last_updated:"Last updated: %s" 复制代码
- 字段后面的冒号必须为 英文冒号 ,如:last_updated:
- 字段冒号后面必须跟一个空格,如:last_updated: "Last updated: %s"
EMFILE Error
Error: EMFILE, too many open files 复制代码
生成大量的文件时,可能遇到EMFILE错误。
可以运行以下命令来增加允许同步I / O操作的数量。
$ ulimit -n 10000 复制代码
Process Out of Memory
当 hexo g
时,遇到以下错误:
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory 复制代码
如下,更改 hexo-cli
文件的第一行,来增大nodejs堆内存.该bug已在 新版本 修复。
#!/usr/bin/env node --max_old_space_size=8192 复制代码
Git Deployment Problems
- RPC failed
error: RPC failed; result=22, HTTP code = 403 fatal: 'username.github.io' does not appear to be a git repository 复制代码
确保你有你的电脑上设置git正确或尝试使用HTTPS存储库URL。
- Error: ENOENT: no such file or directory
这个需要有一定的git的知识,因为可能是由于写错了标签,类别,或文件名,导致本地和github冲突了,Git不能自动合并这一变化所以它打破了自动分支。
解决办法:
- 检查文章的标签和类别,确保本地和github上是相同的。
- 合并分支(Commit)。
- 清除,重构。在站点目录下,命令行(即Git Bash)运行
hexo clean
和hexo g
- 手动将站点目录下的
public
文件夹复制到您的桌面 - 从你的master分支切换到部署在本地分支。
- 从桌面复制
public
文件夹到本地分支。 - 合并分支到github(Commit)。
- 切回master分支。
Server Problems
Error: listen EADDRINUSE 复制代码
你可能使用相同的端口,同时开启了两个Hexo服务器。如果需要同时开启,可以尝试修改端口设置:
$ hexo server -p 5000 复制代码
Plugin Installation Problems
npm ERR! node-waf configure build 复制代码
这个错误可能发生在试图安装一个用Cc++或另一个javascript语言编写的插件。确保您已经安装了正确的编译器在您的计算机上。
Error with DTrace (Mac OS X)
{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' } { [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' } { [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' } 复制代码
DTrace安装可能有问题,重装:
$ npm install hexo --no-optional 复制代码
详见 #1326
Iterate Data Model on Jade or Swig
Hexo使用仓库的数据模型。这不是一个数组,所以你可能需要将对象转换为iterable。
{% for post in site.posts.toArray() %} {% endfor %} 复制代码
Data Not Updated
一些数据不能更新或新生成的文件的最后一个版本完全相同。清理缓存,再试一次:
$ hexo clean 复制代码
No command is executed
那个不能使用除 help
、 init
和 version
以外的命令行(即Git Bash)时, 有可能时站点目录下的 package.json
文件,缺少 hexo
,如下:
{ "hexo": { "version": "3.2.2" } } 复制代码
Escape Contents
Hexo使用Nunjucks渲染的页面. { { } }
或 { % % }
将解析和可能会引起麻烦, 如果要在博文中出现,必须使用三引号:
``` {% raw %} Hello {{ sensitive }} {% endraw %} ``` 复制代码
ENOSPC Error (Linux)
如果运行命令 $ hexo server
返回一个错误:
Error: watch ENOSPC ... 复制代码
可以通过运行 $ npm dedupe
或者以下命令行(即Git Bash):
$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p 复制代码
来增加测试时,你可以看见的文件数量。
EMPERM Error (Windows Subsystem for Linux)
如果在Windows Subsystem for Linux,运行命令 $ hexo server
返回这个错误:
Error: watch /path/to/hexo/theme/ EMPERM 复制代码
因为目前在Windows Subsystem for Linux中,有些内容更改时,还不能实时更新到hexo服务器。
所以需要重新编译,再启动服务器:
$ hexo generate $ hexo server -s 复制代码
Template render error
有时运行命令 $ hexo generate
返回一个错误:
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html Template render error: (unknown path) 复制代码
这意味着有些认不出来单词在你的文件,并且很可能在你的新博文,或者配置文件 _config.yml
中,比如缩进错误:
错误例子:
plugins: hexo-generator-feed hexo-generator-sitemap 复制代码
常用操作
创建文章
命令:
$ hexo new [layout] <title> 复制代码
参数说明:
- [layout]可以为以下三种:
参数名 | 功能 | 文章路径 |
---|---|---|
post | 新建博文 | source/_posts |
page | 新建页面(如404,分类) | source |
draft | 草稿 | source/_drafts |
草稿可通过一下命令发布:
$ hexo publish [layout] <title> 复制代码
-
title注意:
不是博文标题,
是博文markdown文件的名字,
也是博文链接的后缀(如
https://www.simon96.online/2018/10/12/hexo-tutorial/
中的hexo-tutorial)
文章模版
-
创建模版
在新建文章时,Hexo 会根据
scaffolds
文件夹内相对应的文件来建立文件,例如:
$ hexo new blog "simon"
在执行这行指令时,Hexo 会尝试在 scaffolds
文件夹中寻找 blog.md
,并根据其内容建立文章。
-
修改参数
以下是您可以在模版中使用的变量:
变量 | 描述 |
---|---|
layout | 布局 |
title | 标题 |
date | 文件建立日期 |
Front-matter
就是博文最上方以 ---
分隔的那部分。
默认可以使用的Front-matter:
参数 | 描述 | 默认值 |
---|---|---|
layout |
布局 | |
title |
标题 | |
date |
建立日期 | 文件建立日期 |
updated |
更新日期 | 文件更新日期 |
comments |
开启文章的评论功能 | true |
tags |
标签(不适用于分页) | |
categories |
分类(不适用于分页) | |
permalink |
覆盖文章网址 |
感谢支持
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Flutter 实战之从 0 搭建「网易云音乐」App(一):创建项目、添加插件、通用代码
- 使用gulp+browser-sync搭建Sass自动化编译以及自动刷新所需要的插件
- IDEA 插件:多线程文件下载插件开发
- 从头开发一个Flutter插件(二)高德地图定位插件
- Gradle插件开发系列之gradle插件调试方法
- Gradle插件开发系列之开发第一个gradle插件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Compilers
Alfred V. Aho、Monica S. Lam、Ravi Sethi、Jeffrey D. Ullman / Addison Wesley / 2006-9-10 / USD 186.80
This book provides the foundation for understanding the theory and pracitce of compilers. Revised and updated, it reflects the current state of compilation. Every chapter has been completely revised ......一起来看看 《Compilers》 这本书的介绍吧!