Hexo

<article class=“article fmt article-content”><p>工作中搜寻和查阅的文档以英文居多，于是便想着也革新一下本人博客。反对多语言的同时，顺便也算是给新的一年开一个头。</p><p></p><h2>指标</h2><p>这次革新的指标有两个：</p><ol><li>全局多语言（中-英）的反对。</li><li>不同语言之间能够相互切换。</li></ol><h2>摸索</h2><p>hexo 以及之前用的 NexT 主题尽管有 i18n 的反对，但都是对导航、菜单等偏固定内容的反对，并没有全局反对。</p><p>在网上搜寻相干文章后，大抵有如下 3 种解决方案：</p><table><thead><tr><th>序号</th><th>计划</th><th>长处</th><th>毛病</th></tr></thead><tbody><tr><td>1</td><td>在 <code>_post</code> 下新建 <code>en</code> 文件夹寄存英文文章。</td><td>简单明了，无额定改变。</td><td>博客首页会展现所有文章。如果须要按语言显示需另外做开发。</td></tr><tr><td>2</td><td>应用 hexo-generator-i18n 插件。</td><td>简略，装置 + 配置即可应用。</td><td>1. 插件较长时间没有更新.<br/> 2. 装置插件后还须要另做开发，如语言切换等。</td></tr><tr><td>3</td><td>创立两套网站寄存不同版本语言。</td><td>绝对简略，齐全独立。</td><td>两套网站局部配置和代码有冗余。</td></tr></tbody></table><p>思考到操作和保护（次要还是懒，不想本人再开发），还是决定采纳第 3 中计划。</p><p>同时在查找材料时发现了 Fluid 主题，感觉很难受便趁此机会一起降级。</p><h2>革新</h2><p>在新博客的文件夹下，通过 <code>hexo init</code> 别离创立两个语言的博客。目录的构造如下：</p><pre><code class=“shell”>.├── blog-cn├── blog-en└── scripts</code></pre><p>针对 Fluid 主题和多语言的配置能够参考：记一次 Hexo 博客迁徙与多语言站点革新。写的非常具体，循序渐进即可。</p><p>针对部署局部，参考：Hexo增加多语言反对「国际化i18n」。将部署流程汇总到了 <code>shell</code> 文件中，浏览起来能够略微轻松一些，也不便部署。</p><p>其本质就是在编译后的文件中多了一个 <code>en</code> 文件夹，寄存英文内容。因而能够通过 <code>https://{your-blog}/en</code> 来拜访。</p><pre><code class=“shell”>#!/bin/bash# Build CN blogcd blog-cn && pnpm run build# Build En blogcd ../blog-en && pnpm run buildcd ../blog-cnmkdir ./public/en &&mv ../blog-en/public/* ./public/en/pnpm run deploy</code></pre><h2>迁徙</h2><p>hexo 的迁徙一项是最轻松的事件。将 <code>source</code> 下须要的文件复制到新的中央即可。</p><h2>其余</h2><p>剩下的就只是翻译工作了，看看是否能够借助 Google 翻译或者 GPT 的力量了。</p><p>最初欢送来我更新过的博客游玩。</p></article> ...

专题概述本文是集体建站系列的第一篇文章，最终有多少篇文章笔者当初也说不好，因为是一边创立集体站，一边积淀这个过程。每一步都是实操后再总结文档，文档是以章为单位总结的，每一章都会有几篇文章，在发文前也都通过至多3次的纲要、文案的调整和校对，目标是为了尽量让您能看明确，内容包含但不限于教程、实操、最佳实际等，绝对系统化，不过真的十分消耗工夫。 本地环境要求：node、git，高级用户可选装nvm进行node治理；本文档面向：MacOS用户专题指标集体建站其实并不简略，但没啥技术门槛，看下Hexo和theme插件的文档，那么代码层面根本就能够无忧了（主题插件肯定要在建站之初选定，因为每个主题的应用办法都不一样，决定了网站的格调。前期更换主题须要批改很多配置），但要真正上线的话您还要理解，比方域名、云主机、备案、流量、平安、网站经营、老本管制等等常识。好在笔者这几年工作下来对上述常识多少还是有教训积攒的。 <font color=green size=4>本教程终极目标：</font>对Hexo和Butterfly主题的技术解说只是初始指标，除hexo和butterlfy外还会波及其它很多内容，包含经营和老本管制等常识，这将有助于帮您构建本人的技术体系提供参考思路（不局限于集体建设畛域）。So，如果您能把握本系列教程的常识，至多能丰盛您集体的技术图谱，也会从新扫视技术倒退路线以及对将来的布局，而后者是笔者最心愿看到的。因为本专题是以建站这个事来发展的，hexo等框架的存技术应用只是做成这个事的充沛但不必要条件。面向对象本教程即能够做为教程零碎的学习也能够做为字典手册来查问应用。 <font color=green size=4>本教程的指标人群：</font>首先要说的一点就是常识的积攒没有捷径可走，全是无数个不眠夜和工夫堆进去的。但个体因为目标的不同，其抉择的过程和办法也不一样，所以笔者就目标和教程的用法做下简略总结： 如果您只是想理解此方面的内容，那么建议您只须要详读建站流程相干的章节理解下建站的大至内容，而后再按趣味选读；如果您想零碎把握这方面的技能，但不做任何与商业化相干的事，建议您每个章节都实操下但不用每个章节都一点不落的操作，一是比拟耗时间，二是如果没有明确的目的性很难有所播种，因为本教程很多局部是围绕如何前期商业化经营开展的；如果您想打造集体技术品牌甚至实现商业化经营，那么我建议您按章节程序一字不落的实操下。但我还是要先泼盆冷水，要达到这一目标一点也不容易甚至可能会失败，单工夫上对于普通人可能须要1-2年的工夫甚至更长。建站只是其中一步，本系列教程虽不能带给您全部内容，但肯定能够带给您更多的思考以及抉择。但庆幸的是我集体认为这是值得的，因为这件事一旦胜利其带来的长尾效益和衍生空间是您无奈设想的，技术积攒和金钱收益只是其中一部分。<font color=green size=4>本章指标：</font>把握hexo的装置、命令应用，并能在本地胜利运行网站；也可参考基于hexo和aws云搭建集体博客，0根底0费用，有点豪横（2W字超具体图文教程）一文中形容公布博客到github或云主机上。一、搭建博客站点暂定咱们的博客的源码所在的根目录的文件夹名为blog，这个文件夹不须要手工创立，在hexo init则初始化时会主动生成，如下； $npm install hexo-cli -g$hexo init blog # 创立博客源码目录$cd blog$npm install # npm install hexo@7.0.0-rc1 装置指定的版本#装置butterfly主题，举荐下载源码包。$npm install hexo-theme-butterfly$npm install hexo-renderer-pug hexo-renderer-stylus --save批改_config.yml文件中的theme属性值为bufferfly在_config.yml文件所在的目录下创立一个名为_config.buffterlfy.yml的主题文件$ npm install hexo-server --save #选装独自的服务器模块#服务器启动$hexo server --debug #--debug参数也能够不写bufferfly倡议用源码装置： 1、下载源码：github bufferfly2、拷贝源码包中 buffery主题一节中代码示例中的文件 到/themes/bufferfly/上面。 1、hexo源码2、hexo landspace theme源码 ，装置形式同butterfly。 npm view hexo //查看信息npm view hexo versions //查看所有版本npm info hexo //查看依赖信息project阐明上述操作实现后，咱们的我的项目代码大略如下图所示： .├── _config.butterfly.yml├── _config.yml├── package.json├── package-lock.json #锁定装置时的包的版本号├── scaffolds #Hexo的模板是指在新建的文章文件中默认填充的内容。├── source| ├── _drafts| └── _posts└── themes └── bufferflypackage-lock.json：文件锁定版本号，当执行npm install的时候，node不会自动更新package.json文件中的模块，不便多人开发环境的对立；source：资源文件夹，于用寄存用户资源的中央。除 posts 文件夹之外，结尾命名为 (下划线)的文件 / 文件夹和暗藏的文件将会被疏忽。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其余文件会被拷贝过来。theme配置_config.butterfly.yml是主题配置文件，和主配置文件_config.yml都放在根目录下，主题配置文件的内容优先级会高于主配置文件，如果是下载的butterfly主题源码，那么目录构造如下，这些内容是须要拷贝到/themes/butterfly/文件夹下的： ...

hexo+Github Pages博客搭建全过程申明： 演示环境为Ubuntu 16.04，记录时间为16～17年。创立仓库[!NOTE] 目标是应用GitHub Pages来部署咱们的博客。 注册GitHub账号，官网地址：https://github.com/ 登录后如下图，点击创立仓库 填写仓库信息即可 仓库名称必须是用户名.github.io，比方我的用户名是damit5，那么我就填damit5.github.io 配置SSH[!NOTE] 目标是为了不便上传内容到github中。 设置user name 和 emailgit config --global user.name "你的GitHub用户名"git config --global user.email "你的GitHub注册邮箱"生成ssh密钥ssh-keygen -t rsa -C "你的GitHub注册邮箱"个别这种状况下是不须要明码的，所以始终回车就好胜利后，用户文件夹下就会有一个新的文件夹 .ssh，外面就有刚刚创立的ssh密钥文件id_rsa和id_rsa_pub [!NOTE] 注：id_rsa文件是私钥，要妥善保存，id_rsa.pub是公钥文件。 增加公钥到GitHub点击用户头像，而后再点击Settings选项 在用户设置栏，点击SSH and GPG keys选项，而后点击New SSH key 将 id_rsa.pub 的内容复制到Key 文本框中，再点击Add SSH key 测试SSHssh -T git@github.com接下来会显示出上面的确认信息 The authenticity of host 'github.com (192.30.255.112)' can't be established.RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.Are you sure you want to continue connecting (yes/no)? 输出yes而后回车 ...

live2D《Live2D》是一种利用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的间断图像和人物建模来生成一种相似三维模型的二维图像，对于以动画格调为主的冒险游戏来说十分有用 live2d官网，能够思考本人制作本人喜爱的装置依赖npm install --save hexo-helper-live2d这个时候是没有模型文件的，所以下一步是下载模型文件 装置模型去下载一个本人喜爱的模型，将其放入node_modules目录下，或者间接用npm npm install live2d-widget-model-z16而后在_config.yml文件里增加： live2d: enable: true # 举荐应用 jsdelivr 的 CDN 来加载 scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false debug: false model: # 举荐应用 CDN 来加载模型 use: live2d-widget-model-z16 display: position: right width: 150 height: 300 mobile: show: true react: opacity: 0.7 dialog: # # 是否开启对话框 enable: true # # 是否应用一言 hitokoto: true也能够用CDN ### 举荐应用 jsdelivr 的 CDN 来加载 scriptFrom: jsdelivr pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false debug: false model: # 举荐应用 CDN 来加载模型 use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json最初运行网站就能够了 ...

如果图片无奈加载，可到 我的博客 中，查看残缺文章 装置serverless插件npm install -g serverless 创立存储桶首先须要注册登陆腾讯云进入对象存储控制台创立存储桶 名称自定义地区轻易选拜访权限抉择 私有读公有写始终下一步到创立胜利 部署在hexo我的项目根目录下新建 serverless.yml # serverless.ymlcomponent: website # (必填) 援用 component 的名称，以后用到的是 tencent-website 组件name: hexoComponent # (必填) 该 website 组件创立的实例名称app: websiteApp # (可选) 该 website 利用名称stage: dev # (可选) 用于辨别环境信息，默认值是 devinputs: src: src: ./public # Upload static files generated by HEXO index: index.html # dist: ./dist # hook: npm run build # websitePath: ./ region: ap-guangzhou # 创立存储桶时选的地区 bucketName: my-bucket # 创立存储桶写的名称 protocol: https输出命令serverless deploy ...

1. 前言在之前的文章《Hexo 疾速搭建指南》中，重点解说了如何搭建以及部署博客。然而在前期写博客的过程中，有可能遇到很多麻烦，比方： 我不想手动保护文章的 Categorys，我想以文件目录的模式治理文章分类VSCode 编写 Markdown 文件不爽，我想用其余的编辑器来写 Markdownhexo new 指令生成的模板太拉了，我不想用我想把我的 markdown 文档同步到云平台上，不便我的其余设施即时查看那么这篇文章就会教你应用最舒服的姿态来前期保护你的博客，缩小心智累赘与解决各种不爽的中央。 2. 更好的文章治理计划2.1 文章以目录分类当咱们写好一篇文章后，依照 hexo 的默认配置，咱们须要将其放在 source/_post 目录下，等工夫长了之后，_post 目录下的文章就会变得横七竖八，无奈让咱们疾速的 review 到一篇文章。 那么最好的解决方案就是咱们在创立文章的时候以 文章分类 作为文件夹创立咱们的文章，比方： .└── source └── _post ├── 前端 │   ├── Javascript │   │   └── Javascript原型链机制.md │   └── 浏览器 │   └── 浏览器性能优化.md └── 后盾 ├── GoLang │   └── go语言简介.md └── Java └── Spring MVC 疾速入门.md2.2 依据文件目录主动生成 categories 信息尽管咱们把文章放的东倒西歪了，然而每个文章里的 categorys 字段还是要咱们手动本人保护的，比方在 source/_post/前端/Javascript/Javascript原型链机制.md 文件中，咱们要通过手写 categories 来让 hexo 晓得这篇文章被放在 前端-Javascript 分类下： ...

本文来自于轻量应用服务器征文活动用户投稿，已取得作者（昵称海拥，阿里云开发者社区专家博主）受权公布。 去年（2021年）七月份我开始本人第一次搭建博客，从网上找了一些教程，理解到大略须要的几个步骤，须要用到服务器、域名而后再进行域名备案等 。阿里云的服务器在公众口碑中始终是最好的，于是我就进了阿里云官网。阿里云为新用户提供了很大的优惠，最初我选的是轻量应用服务器，99块一年，2核2GB，5Mbps限峰值带宽，对于我来说曾经足够了。 刚开始用的时候我选的 Wordpress 利用镜像，Windows零碎镜像，依据利用搭建中的几个步骤实现了根本的配置。博客的主题我换了很多种，外面简直所有的主题我都试了一遍，但其实还是没有令我特地称心的。起初在敌人的帮忙下，最近我试了一下用Hexo 框架搭建，并且应用了butterfly的主题，最终的成果是一个二次元格调的，我很喜爱。 接下来重点介绍基于轻量应用服务器搭建Hexo博客的具体步骤及butterfly主题的装置，一起来看看吧。 应用轻量应用服务器搭建Hexo本次集体博客大抵的搭建步骤如下：• 配置轻量应用服务器• 服务端装置 Node.js• 服务端装置 Git• 服务端装置 Nginx• 客户端装置 Hexo• 客户端配置免密登录• 服务端创立 Git 仓库• Hexo 主题配置 看起来步骤还有点多，但每一小步都很简略，非常容易操作上手。 1.配置轻量应用服务器阿里云的轻量应用服务器提供了十分多样化的镜像抉择，来满足不同用户的需要，十分不便。搭建的第一步，将零碎镜像重置为CentOS7.9 零碎，而后重置实例明码、配置平安组策略；配置好之后，复制一下公网IP，就能够开始建站了。 2.服务端装置 Node.js① 在本地客户端应用 ssh 连贯阿里云服务器公网IP： ssh root@公网IP 注：公网IP能够登录控制台后，点击详情，在“服务器信息”中查看，如下图： ② 一键式装置配置 Nodejs： cd /tmp && wget https://nodejs.org/dist/v17.5.0/node-v17.5.0-linux-x64.tar.xztar xf node-v17.5.0-linux-x64.tar.xzmv node-v17.5.0-linux-x64 /usr/local/nodeln -s /usr/local/node/bin/node /bin/nodeln -s /usr/local/node/bin/npm /bin/npmecho 'export PATH=/usr/local/node/bin:$PATH' >> /etc/profilesource /etc/profilenode -vnpm -v3.服务端装置 Git一键式装置 Git代码如下： yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils-MakeMakercd /tmp && wget https://www.kernel.org/pub/software/scm/git/git-2.9.5.tar.gztar xf git-2.9.5.tar.gzcd git-2.9.5 && make all prefix=/usr/local/gitmake install prefix=/usr/local/gitecho 'export PATH=$PATH:/usr/local/git/bin' >> /etc/bashrcsource /etc/bashrcgit versiongit config --global user.name "你的账号"git config --global user.email "你的邮箱"执行完就装置胜利了，要留神的是客户端也须要装置一下 Git，图形化始终下一步就行。 ...

因为 github 拜访不太稳固，感觉将博客迁徙到 AWS 上。能够借助 AWS 存储的性能。 为什么抉择 hexo生成页面速度快反对 markdown一键部署超强的扩展性海量的插件创立博客# 装置npm install hexo-cli -g# 创立博客hexo init myblogcd myblognpm install# 本地运行hexo server这短短的几步，博客便创立胜利了。 装置部署工具# 装置npm install hexo-deployer-aws-s3 --save-dev# 将部署配置放入 _config.ymldeploy: type: aws-s3 # 插件的名字 region: us-east-1 # 存储桶所在区域 bucket: my-bucket # 存储桶名字AWS 使用指南注册地址：https://aws.amazon.com/cn/fre...实操文档：https://aws.amazon.com/cn/get...AWS 存储介绍S3 是一种对象存储服务，提供行业当先的可扩展性、数据可用性、安全性和性能。首年应用会有 5 GB 的收费存储空空间。 接下来，就须要咱们在 aws 上创立存储。 创立存储桶 保留后 此时，更新 deploy 配置 # 将部署配置放入 _config.ymldeploy: type: aws-s3 # 插件的名字 region: ap-northeast-1 # 存储桶所在区域 bucket: robinblog # 存储桶名字凭证凭证的作用是为了取得 aws s3 存储的管制权限，便于部署动态网站。进入官网文档，须要生成凭证、配置策略、配置凭证。 ...

一开始筹备应用gitment作为评论零碎，然而搭完发现曾经不可用，随后找到了差不多的gitalkgitalk曾经有很多主题集成，然而很遗憾我应用的Anatolo还没有，尝试了下还算简略，当初把大略步骤写一下 相干地址Anatolo主题：https://github.com/Ben02/hexo...gitalk评论：https://github.com/gitalk/gitalkmd5：https://github.com/blueimp/Ja... （issue label name 不容许超过50字符，所以应用md5生成id） 应用筹备工作抉择一个公共github存储库（已存在或创立一个新的github存储库）用于存储评论创立GitHub Application，Authorization callback URL填写博客地址（点此申请）生成Client Id及Client Secret，复制保留 主题更改定位到Anatolo主题文件夹内，关上{Anatolo Path}/layout/partial/comments.pug文件最下方增加此段代码 if theme.gitalk if theme.gitalk.enable == true a#comments #vcomments(style="margin:0 30px;") link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css') script(src='https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js') script(src='https://cdn.jsdelivr.net/npm/blueimp-md5@2.19.0/js/md5.min.js') script. var gitalk = new Gitalk({ clientID: '#{theme.gitalk.client_id}', clientSecret: '#{theme.gitalk.client_secret}', owner: '#{theme.gitalk.owner}', repo: '#{theme.gitalk.repo}', admin: ['#{theme.gitalk.admin}'], id: md5(location.pathname), // Ensure uniqueness and length less than 50 distractionFreeMode: false // Facebook-like distraction free mode }) gitalk.render('vcomments')增加配置在主题文件夹下_config.yml或根目录下_config.anatolo.yml增加gitalk配置 gitalk: enable: true owner: #owner repo: #repo name admin: #admin name client_id: #client_id client_secret: #client_secret成果 ...

前言本文未经容许，禁止转载！ 视频教程正在制作，期待更新。 本文首发于 YFun's Blog 文章目录装置 Git装置 Node.js更多文章期待更新...下载返回 Git 官网 (https://git-scm.com). 点击页面中的 Download For Windows 下载 Windows 版本。 装置双击运行安装文件。 点击 Next，批准协定。 批改程序安装地位，点击 Next（间接装在 C 盘也不是不行）。 组件选项，可选桌面快捷键、右键菜单、LFS 反对、主动查看更新等。 点击 Next 进入下一步。 开始菜单文件夹名，放弃默认就能够，点击 Next。 默认编辑器，放弃 Vim 就能够，点击 Next。 环境变量，抉择第 2 个，点击 Next。 如果抉择第 1 个，则只能在 Git Bash 中应用，可能会呈现问题 剩下的都能够放弃默认，一路 Next，而后点击 Install。 期待装置结束。 测试在文件夹处右击，点击 Git Bash Here 进入 Git Bash。 （或是在开始菜单中找到 Git Bash） 输出 git --version 查看版本，正确输入版本信息即代表装置胜利。 ...

偏技术的文章有时会用到各种图形，一般来说能够做好图而后截图放到文章中就好了，尽管但图片自身也很小，但存一大堆图片占用空间总感觉不是很好。 mermaidmermaid官方网站 mermaid反对很多种图形的渲染，用它是个不错个抉择。它能够渲染出多种简单的图形。例如上面这个。 sequenceDiagram par Alice to Bob Alice->>Bob: Go help John and Alice to John Alice->>John: I want this done today par John to Charlie John->>Charlie: Can we do this today? and John to Diana John->>Diana: Can you help us today? end end而绘制它也仅仅须要几行代码 sequenceDiagram par Alice to Bob Alice->>Bob: Go help John and Alice to John Alice->>John: I want this done today par John to Charlie John->>Charlie: Can we do this today? and John to Diana John->>Diana: Can you help us today? end end装置装置步骤很简略，只须要三步 ...

前言：兴许你当初没有本人的博客，但想在有必要的时候展现自我，记录身边的生存。兴许你曾经搭建了本人的博客，但搭建在中心化服务器上常常拜访很慢，容易宕机。那么4everland可能是你的不错抉择，不必花钱，访问速度快还送域名。本文就是为了帮忙想领有本人博客的新敌人搭建一套去中心化的博客或者帮原博主构建一个备站。 介绍：4everland: 4everland提供了一个云平台，能够优化整个我的项目开发和部署体验，它有很弱小的性能值得去摸索，集体应用是收费的，提供了域名拜访，应用方便快捷。hexo: Hexo 是一个基于 nodejs 的动态博客网站生成器，通过应用脚手架装置后，命令操作简略，间接开箱应用，反对丰盛的主题，反对高度的自定义化，次要应用 markdown 语法。你能够自行开发插件，优化你的博客。 搭建在搭建博客之前，咱们须要一些筹备工作，首先是 4everland 平台的账号，其次是装置 nodejs 以及 hexo-cli 脚手架。先找到官网，抉择Hosting连贯你的GitHub账户创立一个新我的项目装置 hexo-cli在装置 hexo-cli 前，须要保障电脑装置了 nodejs。 nodejs 须要在node 官网下载，装置好 nodejs 后，也会相应的装置上 npm，接下来就能够装置 hexo-cli 了。装置命令：npm install hexo-cli -g检测是否装置胜利。4everland + hexo 创立我的项目4everland平台中反对抉择多种我的项目模版，包含但不限于 Next.js，Nuxt.js，Hexo，Angular 等多种类型。因为目前我的项目方没有提供官网的模板，须要自行去github导入git或者将本地git上传到github再通过4EVERLAND部署。上面介绍如何将本地代码放到github上。在确认曾经装置hexo与Git的前提下初始化hexo$ hexo init Blog上述命令会创立一个名为Blog的文件夹，博客初始化的所有内容都将寄存在这个文件夹中接下来切换到Blog目录下$ cd Blog$ npm install执行如下命令，生成动态页面$ hexo generate(或者间接hexo g)装置hexo-server包$ npm install hexo-server –save浏览器输出http://localhost:4000,就能看到本地hexo的helloworld页面如上，本地曾经能跑起来了这时，只有再github里创立一个我的项目再将本地代码克隆到git上根本的筹备工作就曾经实现了最初你只须要在4everland里登录github账户进行简略的部署就能够发现你的博客曾经完满的运行在IPFS去中心化网络上。

前 言我的这个博客站点大概始建于2010年以前，应用过 dlog、pjblog、zblog 等博客程序，也手动建设应用过纯动态 HTML 页面，大概2010年开始应用 WordPress。最近几年有感于 WordPress 过于臃肿简单，而我的目标只是想写点什么，给本人留下些记录，于是将网站迁徙到了更加简洁的hexo。 在本地电脑搭建好环境，配置好 hexo 站点。每次在网易云笔记里写好 markdown 格局的文章，而后复制到本地电脑 hexo 的对应目录下，手动生成新的网站动态页面。最初再手动上传到服务器空间里，这样就实现了网站的更新。 Webify官网：https://webify.cloudbase.net/ 我的需要Hexo尽管简洁、疾速，但有几个问题始终困扰着我，甚至影响了写作的趣味和欲望。 第一，肯定要应用我装置配置了 hexo 的那台电脑，能力公布生成新的动态页面，而后能力更新到服务器。尽管也理解过一些方法，比方将 hexo 配置文件复制装置到不同电脑，或者上传到 github，通过 github 更新，但究竟不能很好解决网站更新，文章公布的问题。 第二个问题，其实是第一个问题的延长。每次公布新文章，文章写好当前，还须要复制到 hexo 目录下，手动生成动态页面，而后上传到网站服务器，这个过程太过繁琐。当然也去理解过解决办法，比方应用 hexo-admin 插件、给 hexo 增加后盾治理，把 hexo 部署到服务器上，通过 admin-hexo 在线更新文章。然而这些都背离了我当初应用 hexo 的初心---简洁，疾速。如果要这样折腾，为何不应用 WordPress 等性能更弱小的博客程序呢？ 在折腾的过程中，在 hexo 官网上看见了一篇技术文章，介绍如何将 hexo 部署到GitHub Pages，十分合乎我的需要，惟一的问题是，部署过程中须要借助 Travis CI 这个第三方平台，简略的事件又变得复杂了。最初我甚至动了想把 hexo 转换成 jekyll 念头，因为 hexo 和 jekyll 构造根本一样，齐全反对.md的文章格局，更重要的是 GitHub Pages 原生的反对 jekyll，简直不须要任何设置。Github 尽管在国内很多中央拜访不稳固，然而套上 cdn 当前能够解决这个问题。 我开始着手将 hexo 迁徙到 GitHub Pages 上，应用 jekyll 部署。然而不久发现了一个大问题，GitHub Pages 不反对 jekyll 插件。没错，简略的借助 jekyll 插件实现的比方翻页，搜寻等性能，在 GitHub Pages 简直实现不了，这样就很失望了。于是所有再次停下来。 ...

昨天写的Github+Hexo搭建集体博客，局部人在应用过程中，发现拜访Github时快时慢，具体起因大家懂的，所以明天给大家出一个Coding+Hexo的组合教程，这两套计划比起来呢，各有千秋，其中Github上手难度较高，但配置却很灵便，例如你的博客须要绑定域名,只须要在我的项目根目录建CNAME即可，但Coding如果要绑定本人的域名，则须要先在腾讯云进行域名备案的，绝对能繁琐一些，Coding也有长处，对于国内用户来说，服务很稳固，Coding不仅反对Hexo，同时也反对其余类型博客的模板创立，例如Jekyll、WordPress等。 大家平时挂个动态企业站都能够应用Coding，Coding在被腾讯收买后，局部性能须要跟腾讯云联合应用，上面开始咱们的教程，大家有什么问题能够留言，我看到后会第一工夫进行回复。 Coding+Hexo 拜访coding.net，注册账号，登录。创立新的我的项目，抉择全功能DevOps我的项目。找到网站托管性能，开始进行腾讯云受权，这里须要留神，在腾讯云须要进行实名制。抉择新建网站。点击动态网站，勾选Hexo，节点倡议大家选国内。 期待部署。 本地拉取代码，找到仓库地址，应用Git命令进行拉取，如果没有Git，通过Git Windows下载。git clone https://e.coding.net/xxx/xxx/xxx.git dir在Hexo目录下，装置依赖，并创立一篇新的文章。 npm install hexo new 'this is new page'上传代码。git add . git commit -m '提交信息'git push期待部署，部署实现后拜访。 自定义域名，须要先进行域名备案。

本文最后公布于我的集体博客Bambrow's Blog，采纳 BY-NC-SA 许可协定，转载请注明出处。若有后续更新，将更新于原博客。欢送去我的博客浏览更多文章！本文具体记录一下本站的建设过程，以便查阅。对于具体的细节则不会做过多解释，次要展现步骤。这一篇次要讲述购买及绑定域名的相干操作。 购买域名当初咱们的站点曾经有模有样了，那就能够筹备为它绑定一个域名了。首先第一步就是购买域名。国内国外都有泛滥域名服务商，本着少受一些限度的准则，举荐从国外几个出名的服务商购买。在网上能够搜到许多域名商的介绍与购买指南，这里就不赘述了。 如果切实抉择艰难，能够去这里比拟一下各家的价格。很多域名商首年或者首次转移都有优惠，如果不想每年都折腾，肯定要记得比照一下续费价格，以及有没有暗藏费用。另外最好抉择有WHOIS隐衷爱护的域名商，以及在付费的时候不要错选成那些乌七八糟的套餐，只买域名即可。 绑定域名并增加CNAME这一步次要参考了两篇文章，别离讲了应用1和不应用2DNSPod的状况，你能够视状况而定。我这里参考的是第二篇，也就是GitHub官网的指南。 首先去你的GitHub用户名.github.io仓库中，点击Settings，在GitHub Pages的Custom domain下输出你买好的域名，点击Save保留。 此时你会发现上面的Enforce HTTPS被勾销勾选，为了将其再次选中，须要以下的步骤。 首先配置CNAME，在source文件夹下建设一个新文件叫做CNAME（不要带任何后缀），将你买好的域名输出进去。随后向GitHub提交这次批改。 随后，关上你的域名商网站，为你的域名配置DNS。不同的域名商可能有不太一样的步骤，你能够搜寻你的域名商 + connect to github pages来找到教程。在个别状况下，你须要设置4个A记录与1个CNAME记录，A记录指向上面四个IP地址： 185.199.108.153185.199.109.153185.199.110.153185.199.111.153CNAME记录则设置为www CNAME 你的GitHub用户名.github.io。详情能够参看教程里的设置apex域局部。 随后刷新GitHub的设置页，看是否能够点选Enforce HTTPS。有时候须要等一段时间才能够。你也能够在Terminal测试一下DNS是否配置正确（可能也须要等一段时间才会失效）： $ dig bambrow.com +noall +answer; <<>> DiG 9.10.6 <<>> bambrow.com +noall +answer;; global options: +cmdbambrow.com. 194 IN A 185.199.109.153bambrow.com. 194 IN A 185.199.111.153bambrow.com. 194 IN A 185.199.110.153bambrow.com. 194 IN A 185.199.108.153也能够在dig命令的域名前加上www看一下CNAME记录是否失效： $ dig www.bambrow.com +noall +answer; <<>> DiG 9.10.6 <<>> www.bambrow.com +noall +answer;; global options: +cmdwww.bambrow.com. 299 IN CNAME bambrow.github.io.bambrow.github.io. 3599 IN A 185.199.109.153bambrow.github.io. 3599 IN A 185.199.108.153bambrow.github.io. 3599 IN A 185.199.111.153bambrow.github.io. 3599 IN A 185.199.110.153其余设置把_config.yml的url批改为你的新域名。如果你配置了LeanCloud，在利用中点击设置，点击平安核心，在Web平安域名把你的新域名加进去。当初基本上就功败垂成了！ ...

软件装置进入node.js官网下载安装 https://nodejs.org/en/ 关上cmd命令装置hexo npm install -g hexo-cli磁盘新建文件夹Hexo，关上cmd命令进入Hexo文件夹，进行hexo我的项目初始化 hexo init主题设置从github下载yilia主题，下载地址 https://github.com/litten/hex... 在hexo文件夹中新建themes/yiliawe，解压源码文件 批改Hexo文件夹中_config.yml文件，配置themel参数为yilia 生成公布批改Hexo文件夹中_config.yml文件，配置url参数为github page地址，倡议创立我的项目名字格局为 登录名.github.io 便于拜访及域名好看 关上cmd命令进入Hexo文件夹，运行生成命令，生成publish文件夹 hexo g 将publish中的内容全副拷贝至github我的项目clone的文件夹中，提交，间接拜访github page地址即可，公布有提早期待1-2分钟，新建文章在Hexo\source\_posts目录下新建markdown文件即可

曾经应用HEXO失常构建GitHub页面 依据github action 给hexo配置主动部署github page 返回墨抒颖的集体网站查看污浊版1. 为仓库设置拜访密钥第一步学生成密钥，关上命令行并生成一组密钥 ssh-keygen -f github-deploy-key -C "HEXO CD"<!-- more --> 记得跳过明码啥的，这里连按三次回车就好 随后咱们会取得两个密钥文件，这两个等下会用到 2. 上传私钥github仓库地址 → Settings → Secrets → New secret 点击new repository secret新建仓库密钥名字 HEXO_DEPLOY_PRI内容 github-deploy-key文件内的所有内容 ⚠不要轻易走漏你的私钥⚠ 3. 上传公钥这里要分清你的仓库->page的模式，公钥被上传的仓库代表着要被部署的仓库，github不反对同一个（部署）公钥上传至多个仓库 不同仓库如果你的hexo代码和要部署的页面不在同一个仓库 比方你有一些临时不不便公开的内容，或者你是不想公开你的Hexo代码，只想将动态页面（文字，图片，网站主题所用的各个款式和脚本）部署到github page上其余的内容一律不蕴含此时你须要将公钥上传到你要部署的仓库中去 名字 `HEXO_DEPLOY_PUB内容 github-deploy-key.pub文件内的所有内容 记得勾选容许写入权限雷同仓库与上一步相似，只是上传到的仓库地址和你的代码仓库地址一样，不过你肯定要确定你有在配置中设置号正确的的分支 配置github action这里能够在github上点击 Action -> new workflow -> set up a workflow yourself轻易挑个模板将内容放进去，也能够在代码仓库中的.github/workflow增加一个hexo-ci.yml而后将以下内容放进该文件中。 记得把 blog_source_branch, username, username@email.address替换成你本人的 name: HEXO CIon: push: branches: - <blog_source_branch>jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [14.x] steps: - uses: actions/checkout@v1 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - name: Configuration environment env: HEXO_DEPLOY_PRI: ${{secrets.HEXO_DEPLOY_PRI}} run: | mkdir -p ~/.ssh/ echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa chmod 600 ~/.ssh/id_rsa ssh-keyscan github.com >> ~/.ssh/known_hosts git config --global user.name "<username>" git config --global user.email "<username@email.address>" - name: Install dependencies run: | npm i -g hexo-cli npm i - name: Deploy hexo run: | hexo clean && hexo generate && hexo deploy而后提交本次更改即可 ...

周末降级了下 hexo 到新版本，发现降级后，构建时呈现了一些谬误，以下是呈现的问题，及解决办法。 WARN Deprecated config detected: "external_link" with a Boolean value is deprecated. See https://hexo.io/docs/configur... for more details.批改 _config.yml 文件，将如下内容做调整。 external_link: true将下面的内容，批改为如下内容。 external_link: enable: true # Open external links in new tab field: site # Apply to the whole site exclude: ''err: TypeError: Cannot read property 'bind' of undefinederr: TypeError: Cannot read property 'bind' of undefined...Script load failed: %s themes/butterfly/scripts/filters/post_lazyload.js个别呈现相似谬误是因为降级hexo后，其余依赖未降级齐全，能够思考删除依赖，从新 install。 npm cache clean --forcerm -rf node_modulesrm package-lock.jsonnpm installhexo cleanhexo g能够参考git主题我的项目中的 issues-406 。 ...

前言背景17年在大学用Hexo部署了第一个博客后，始终对Hexo集体博客进行革新降级。最开始是挂载在Github.io，后用Nginx迁徙至自有域名chanchun.net，在起初启用了GitHooks让Hexo构建产物间接SSH推送至云，再起初通过letsencrypt 降级了Https。自从Oracle Cloud凋谢了收费实例后，始终想把博客服务迁徙到收费的云上（无奈工作太忙，也怪搬瓦工服务器太难用）。那么与其从0开始迁徙，还不如把始终以来的积淀（Https、GitHooks、Nginx）也一起Docker化掉。不便当前持续迁徙，也给本人想折腾博客的人一个我认为最终极的解决方案。 你须要筹备什么云根底配置买一个Niubility的域名（举荐国外域名注册商）买一个Niubility云服务实例（举荐国外云服务商）把你的域名DNS解析至你的云公网IP（失效工夫预计从0-48小时不等）Hexo熟能生巧相熟Hexo的基本操作，相熟hexo init hexo new hexo clean hexo generate hexo server hexo deploy 等命令，并能启动Hexo服务构建出动态html，如果曾经搭建过了简略的博客零碎就更棒棒Docker理解一下Docker基本操作docker build docker run 等等一系列操作正题思路第一步，新建一个hexo-docker工程来构建Docker镜像（基于Nginx镜像），外面有且仅蕴含Dockerfile和初始Nginx配置。Dockerfile中形容了Githooks挂载地址，装置好了Certbot命令，并退出初始Nginx配置。 第二步，在云服务中间接Docker Run起结构好的镜像，进入镜像生成好letsencrypt证书，配置好近程SSH提供给Hexo Deploy。 第三步，配置好本地的Hexo代码，Hexo Deploy就能看到带绿锁的自有域名的博客了。 Show CodeDockerfile #基于Nginx镜像FROM nginx:latest#换国内的源，这里用网易源RUN sed -i 's#http://deb.debian.org#https://mirrors.163.com#g' /etc/apt/sources.listRUN sed -i 's#http://security.debian.org#https://mirrors.163.com#g' /etc/apt/sources.list#更新Docker中的apt-getRUN rm -Rf /var/lib/apt/lists/* && apt-get update#装置Git，挂载Githooks钩子，并将产物搁置在var/www/hexo中RUN apt-get install -y gitRUN git init --bare ~/blogs.gitRUN mkdir -p /var/www/hexoRUN echo "git --work-tree=/var/www/hexo --git-dir=/root/blogs.git checkout -f" >~/blogs.git/hooks/post-receiveRUN chmod a+x ~/blogs.git/hooks/post-receive#SSH初始化RUN apt-get install -y openssh-serverRUN ssh-keygen -t rsa -f /etc/ssh/ssh_host_rsa_key -yRUN ssh-keygen -t ecdsa -f /etc/ssh/ssh_host_ecdsa_key -yRUN ssh-keygen -t ed25519 -f /etc/ssh/ssh_host_ed25519_key -y#装置CertbotRUN apt-get install -y certbotRUN apt-get install -y python3-certbot-nginx#初始化Nginx配置挂载，这里抉择间接笼罩所有配置ADD nginx/hexo.conf /etc/nginx/nginx.conf#裸露22 SSH#裸露80 HTTP#裸露443 HTTPSEXPOSE 22EXPOSE 80EXPOSE 443Nginx配置 ...

原文地址：Hexo博客应用腾讯云CDN减速及优化 应用公共 CDN 加载局部资源批改主题（我的是NexT主题）配置文件，应用公共CDN加载局部CSS、JS文件，我抉择的是 jsDelivr 这个公共CDN平台； 提供其余平台的CDN： 七牛云又拍云BootCDNjsDelivr编辑 _config.yml： # Script Vendors.# Set a CDN address for the vendor you want to customize.# For example# jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js# Be aware that you should use the same version as internal ones to avoid potential problems.# Please use the https protocol of CDN files when you enable https on your site.vendors: # Internal path prefix. Please do not edit it. _internal: lib # Internal version: 2.1.3 jquery: //cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js # Internal version: 2.1.5 # See: http://fancyapps.com/fancybox/ fancybox: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js fancybox_css: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css # Internal version: 1.0.6 # See: https://github.com/ftlabs/fastclick fastclick: //cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js # Internal version: 1.9.7 # See: https://github.com/tuupola/jquery_lazyload lazyload: //cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js # Internal version: 1.2.1 # See: http://VelocityJS.org velocity: //cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js # Internal version: 1.2.1 # See: http://VelocityJS.org velocity_ui: //cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js # Internal version: 0.7.9 # See: https://faisalman.github.io/ua-parser-js/ ua_parser: //cdn.jsdelivr.net/ua-parser.js/0.7.10/ua-parser.min.js # Internal version: 4.6.2 # See: http://fontawesome.io/ fontawesome: //maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css # Internal version: 1 # https://www.algolia.com algolia_instant_js: algolia_instant_css: # Internal version: 1.0.2 # See: https://github.com/HubSpot/pace # Or use direct links below: # pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js # pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.cssInternal version 阐明 NexT 外部应用的版本，通过测试的版本，咱们在公共CDN平台找到相应的版本并配置即可。NexT 官网也给出了阐明: 设置 「JavaScript 第三方库」 ...

>> 原文链接 Contents## Contents## 前言 1. hexo 是什么？2. 何为优化？## 性能优化指标 1. 整体运行性能2. 网站可拜访性3. 网站是否利用了最佳实际策略 > 1) 应用 target="_blank" 的 <a> 链接如果没有申明 rel="noopener noreferrer" 存在平安危险。> 2) 查看浏览器端控制台是否有告警和谬误提醒，通过批示定位问题并解决。> 3) http 和 https 协定地址不混用> 4) 防止应用 AppCache> 5) 防止应用 document.write()> 6) 防止应用 mutation events> 7) 防止应用 Web SQL> 8) 防止加载过于宏大的 DOM 树> 9) 容许用户粘贴明码4. 网站搜索引擎优化SEO## 性能测试工具 lighthouse## 基于 hexo 框架的网站优化 1. 优化资源加载工夫 ➣ 应用 defer/async 异步下载 script 脚本资源➣ 应用 async 函数异步加载内部资源➣ 应用浏览器 onfocus 事件提早内部资源加载➣ 应用 preload/prefetch/preconnect 进行预加载优化➣ 应用 hexo 插件压缩代码文件和图片文件➣ 编写 hexo-img-lazyload 插件减少图片懒加载个性➣ 应用 IntersectionObserver API 懒加载其它资源➣ 应用 CDN 加载内部依赖脚本➣ 应用 Aplayer 代替 iframe 加载网易云音乐2. 优化界面运行性能 ...

前言有些同学可能感觉搭建博客是一件麻烦的事，既须要购买注册域名，又要购买配置服务器，还须要花老本去保护它们。没关系，即便这些你都没有，照样能够搭建本人的博客。你只须要筹备一个github账号。 本文概览如下： 好了，当初咱们正式应用hexo开始搭建博客吧~ 搭建博客装置hexonpm install -g hexo-cli初始化我的项目当初咱们曾经装置实现hexo了。接下来应用hexo初始化博客我的项目。 // 初始化生成blog我的项目hexo init blog配置主题hexo默认的主题是_landscape，当初咱们将主题配置为 keep。_ // 确认目录是否切换到了blog中，如果没有，则将目录切换到blog中cd blog// 装置keep主题npm install hexo-theme-keep// 批改_config.yml配置文件theme: keep// 预览网站hexo server在浏览器中关上http://localhost:4000，如图 增加文章新建当初，让咱们新建一篇博客 // 在blog我的项目中，执行如下命令：新建文章hexo new post 今日菜谱如图如示，新建的这篇博客以markdown的格局模式存储在了blog/source/_posts目录下。 编辑增加注释当初咱们关上【今日菜谱.md】，写下咱们的今日菜谱。 而后保留。刷新http://localhost:4000该链接。便能够看到看到咱们刚刚更新的最新文章了。如图 增加分类和标签接着咱们为文章增加分类和标签：关上【今日菜谱.md】，批改如下而后，关上终端别离执行如下命令。 hexo new page categorieshexo new page tags如下所示，hexo会在souce目录下，创立一个categories和tags文件夹，外面都蕴含一个index.md文件。当初咱们在浏览器中别离拜访如下地址，便能够别离看到咱们增加的分类和标签了。点击【美食】分类和【菜谱】标签便能够看到属于它们的文章。http://localhost:4000/categories/ http://localhost:4000/tags/ 为了能在主页间接拜访标签和分类，咱们能够对node_moduels/hexo-theme-keep/_config.yml配置文件做如下批改:再次刷新http://localhost:4000，如图 公布草稿如果你临时还不想要文章被公开拜访，能够先创立草稿。如下 hexo new draft 今日随想 刷新http://localhost:4000临时还无法访问咱们新创建的这篇文章，如果想要拜访这篇文章，咱们则须要公布该文章，执行如下命令 // 公布草稿hexo publish draft 今日随想当初这篇文章从_draft目录挪动到了_post目录。接着，咱们再刷新http://localhost:4000，便能够看到这篇文章了 部署博客当初咱们应用github page来部署咱们的博客。首先你须要有一个github账号，如果没有则须要先去注册一个。 新建仓库1.咱们关上 github，而后点击New repository按钮，如图 2.创立一个名为username .github.io的存储库，其中username是你在GitHub上的用户名3.胜利创立长仓库后，复制仓库的https地址，如图 部署// 确认目录是否切换到了blog中，如果没有，则将目录切换到blog中cd blog// 装置部署插件npm install hexo-deployer-git --save// 批改_config.yml配置文件// 将复制的地址，黏贴到如下repo字段中deploy: type: git repo: https://github.com/one-cheese/one-cheese.github.io.git branch: master // 部署网站到创立的仓库hexo deploy部署实现后，咱们刷新one-cheese.github.io仓库，本地生成的public中的动态资源全都上传到了该仓库中，如图。当初，拜访github page地址one-cheese.github.io，便能够看到部署胜利的博客了。 ...

筹备工作node npm（装置完node后就有了），若npm下载速度很慢，可装置cnpm node装置hexo-cli模块：npm install -g hexo-cli 开始搭建（windows平台）新建一个文件夹来搁置咱们的博客 在这个文件夹中关上cmd，输出相干的命令 hexo init：初始化创立博客 hexo s：关上博客（默认地址：http://localhost:4000） hexo n 'xxxx（文章名）'：新建一篇博客文章 而后能够在此md文件中编写相干的内容 hexo g：生成一下文件 hexo clean：革除缓存（最好每次都革除一下） 把博客与github关联（推送到github上）这个的益处是能够不必去租一台云服务器去挂载，不必申请域名，对学生党很敌对 在github上创立一个仓库（留神仓库的命名格局必须为：用户名.github.io） 装置hexo-deployer-git：npm install -g hexo-deployer-git 编辑一下_config.yml文件 其中的repo为github仓库的SSH模式的地址（绝对于HTTPS的地址，这个地址能缩小一些不必要的谬误） 而后就能够把博客推送到github的仓库中了：hexo d（第一次输出的时候会提醒填写github的邮箱，明码，用户名等） 此时就能够在github仓库中看到所推送的博客文件 这个时候就能够在浏览器中输出方才命名的仓库名，就能够拜访到本人的博客啦 批改博客的主题hexo主题 去clone对应主题中的github仓库：git clone 对应主题仓库的地址 themes/xxx（寄存的主题名文件夹） 此时在themes文件夹下就能够看到方才clone的主题文件了 而后编辑_config.yml文件 theme那一项设置主题的文件夹名就好了 而后从新hexo g，hexo d，hexo clean就好了 可能博客没那么快有显示变动，能够多刷新几下网址 图片无奈显示的问题可参考网站：https://www.jianshu.com/p/ea78bdd0551f/ 结尾总的来说，当你批改了你的一些文件后，而后要推送到github近程库中 按程序输出的命令顺次为：(大部分状况下) hexo g hexo d hexo clean 最初，欢送来拜访我的集体博客哦，不定期更新！！！（https://taptaq.github.io/）心愿有用，谢谢！！！

互联网时代的降临，信息的交换十分重要，优良的信息共享平台越来越多，其中集体博客就是一种十分受欢迎的形式。 这里介绍一下github+Hexo的形式，如果你也想搭建本人的集体博客，能够跟着教程疾速搭建一个属于本人的博客吧。 什么是Hexo?Hexo 是一个疾速、简洁且高效的博客框架。Hexo 应用 Markdown（或其余渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成动态网页。装置git关上 git官网 ，抉择本人电脑系统，而后选对应版本的安装包进行装置，而后一路进行傻瓜式的装置就好。如果装置胜利，桌面鼠标右键会有git的菜单 装置node.js如果是win10零碎， 关上node官网 间接下载最新的版本就行，别下错版本；如果是win7零碎，可能不反对最新版本， 点这下载 ， 我都是下msi文件，间接装置完事 很不便。 装置实现当前，win+R关上cmd，输出node，有提醒就代表装置胜利了。 node.js版本不能低于12 装置Hexo(1)首先批改 npm 的装置源，如果不换装置的时候会十分慢，这里换成淘宝的npm镜像 $ npm config set registry https://registry.npm.taobao.org(2)装置Hexo $ npm install -g hexo-cli(3)定位到你本地的hexo文件夹(你本人创立的文件夹，任何门路任何名字都能够，最好别有中文), $ cd /d D:Hexo(4)创立主文件夹 （速度可能有点慢，如果换了源工夫还特地长，看看是不是github卡住了，挂一个代理试试），这个文件夹就是当前放代码的中央，倡议别乱放 $ hexo init bolg如果这一步卡住了，那就追加一个npm的装置源 $ npm --registry https://registry.npm.taobao.org info underscore(5)生成网站动态文件 （默认设置public文件夹） $ hexo g(6)启动服务 $ hexo s关上浏览器拜访 http://localhost:4000就能看到内容。默认的官网主题，可能会比拟丑 我的网站 https://www.jsonformatting.com/

报错信息：ChildProcess.<anonymous> hexo/node_modules/hexo-util/lib/spawn.js:37:17。 Coding仓库地址更改了导致 hexo g -d 忽然部署失败的起因剖析思路及解决。 前言前段时间忙于工作，有段时间没更新博客了，明天更新博客部署发现忽然部署失败了。 刚开始依据报错信息，在网上搜寻了一圈，各种答案都有，发现都不太精确，有的还说是git的版本问题要升到最新的git版本，为此我还降级了mac的零碎和git的版本。但发现并不能解决问题。 最初，冷静下来剖析报错的信息，忽然有了方向，最初定位到是Coding 仓库的地址扭转了导致的忽然部署失败，也验证了本人的猜测。 我的博客是同时部署在 Github 和 Coding 上的，Coding 忽然把仓库地址的规定改了，我也不晓得，太坑了.. 起因剖析思路剖析问题的思路如下： 解决办法上 Coding 仓库上查看批改后的仓库地址，把 Coding 的部署地址批改过去就好了。Coding部署地址的配置中央在：hexo 文件夹根目录的 _config.yml 文件里。如下： 批改之后保留配置问题，从新 hexo g -d 生成并部署就能够部署胜利了。问题解决。 至于博客源码仓库，我也是寄存在Coding上的（之前Github还不反对公有仓库），不过上传博客源码的时候不必批改仓库目录， git push 的时候会主动重定向为Coding批改后的仓库地址。

环境要求node.js > 10.13gitHexo默认你晓得Hexo的应用办法创立一个仓库(repository)进入GitHub，右上角点击 New repository将Repository name设置成 你的用户名.github.io ，留神，用户名必须跟你的截然不同复制GitHub连贯 git@github.com:Chenilove/Chenilove.github.io.git ，留神这里用HTTPS的话每次提交都要登录，举荐SSH在Hexo我的项目根目录下，编辑_config.yml文件，外面批改 # Deployment## Docs: https://hexo.io/docs/one-command-deploymentdeploy: - type: git # 提交类型git repo: git@github.com:Chenilove/Chenilove.github.io.git # 提交仓库地址 branch: main # 分支GitHub的默认分支是main Gitee的分支是master 能够填branch让hexo默认提交 message: message # 提交信息执行我的项目生成和部署命令 hexo ghexo d最初拜访 https://chenilove.github.io/ 就能够了issues执行hexo d每次都要登录是怎么回事?将_config.yml里的repo改成SSH（git@github.com）的链接就行了

开始之前须要在电脑上装置好Git和node.js，Mac上能够应用Homebrew命令行工具来装置Git和node.js 装置Homebrew在命令行工具输出以下命令，如果曾经装置过Homebrew能够疏忽 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"<!--more--> Homebrew 装置 node.jsbrew install node装置后能够应用命令来查看是否装置胜利查看node node -v输入后果： v12.14.1查看npm是否装置胜利，npm是node.js的包管理工具，用它来装置hexo npm -v输入后果: 6.13.4Homebrew 装置gitbrew install git查看git是否装置胜利 git -v输入后果: git version 2.24.3 (Apple Git-128)应用 npm 装置 hexosudo npm install -g hexo-cli装置实现后，在Desktop创立一个blog文件夹，在该文件夹下初始化咱们的博客 cd ~/Desktop && mkdir blog && cd blog在该文件件目录下执行博客初始化操作 # 会下载一些node.js的依赖文件hexo init初始化胜利后，在blog目录下执行预览操作 hexo s 当看到如下输入就能够预览咱们创立的博客了 INFO Validating configINFO Start processingINFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop. 预览成果如下 ...

Hexo 是一个疾速、简洁且高效的博客框架，它应用 Markdown（或其余渲染引擎）解析文章，在几秒内，即可利用其泛滥的靓丽主题生成动态网页。正是这种简略、收费和可扩大的个性，Hexo 越来越受到程序员的青睐。这里咱们通过一个具体的教程，给大家演示一下如何在 5 分钟内搭建并部署好一个集体站点（博客）。 咱们应用 Hexo 框架来搭建博客站点，同时将站点托管到 LeanCloud 平台的「云引擎」之上，以实现最终的部署上线。闲言少叙，书归注释，咱们看看具体的步骤是什么样子的。 1. 装置依赖Hexo 依赖于 Node.js 和 Git，如果你的电脑中曾经装置了这两个必备程序，那么能够间接返回下一步。如果你的电脑中尚未装置所须要的程序，请参考官网指南实现装置。 2. 装置 Hexo依赖装置实现之后，能够应用 npm 装置 Hexo。 $ npm install -g hexo-cli3. 下载博客我的项目模版Hexo 命令行工具能够创立一个典型的博客我的项目，在该我的项目内 Hexo 通过应用特定的主题（theme）来对 Markdown 格局的文章内容进行渲染，从而生成动态文件。个别状况下，咱们只须要把这些动态文件部署到近程服务器上，即可取得一个可用站点。 LeanCloud 的云引擎提供了十分好用的网站托管性能，此外还提供欠缺的日志收集、监控等运维服务，这就要求一个站点在根本的动态内容之外还能反对多数动静的治理接口（在云引擎的我的项目框架中曾经实现）。 为此咱们在 Hexo 我的项目框架的根底上退出了大量 LeanCloud 云引擎须要的动静响应文件，做成了 hexo-engine 这样一个开源的我的项目模版。开发者能够间接将这个我的项目下载到本地，以此为根底开始搭建本人的博客站点。 $ git clone git@github.com:leancloud/hexo-engine.git下载好模板之后，咱们须要先装置好 Node.js 的我的项目依赖，以便于后续的操作： $ cd hexo-engine$ npm install4. 增加内容Hexo 框架将所有的博客文章对立搁置在 source/_posts 目录下。咱们进入 hexo-engine 目录，执行 hexo new 命令即可减少一篇新的博客文章。 例如咱们想减少一篇「5 分钟疾速搭建好你的集体站点」的博客，那么能够运行如下命令： $ cd hexo-engine$ hexo new "build your own website in 5 minutes"执行完之后咱们可看到如下的后果信息： ...

clone代码后查看运行时成果,或立刻拜访这里查看成果https://moshuying.top仓库链接，点个收费的星星感激不尽。 主题文件默认状况下仿佛不会主动clone能够切到主题目录下下载主题，能够自行clone主题最近想在hexo中嵌入一些shader，折腾了一些工夫后终于欠缺，实际上用这种办法不仅能够在hexo中嵌入shader,也能够嵌入babylonjs,pxixjs,Layabox,Egret,Cocos2等，先看成果，原理什么的其实很简略。 因为一些shader特地耗费显卡性能，在glsl_snippets.js中断定如果第一帧渲染工夫超过0.4秒就不再渲染了。也能够点击shader暂停渲染 嵌入shadershader起源shaderToy齐全反对shadertoy的代码，参考自大神的代码stackoverflow，在这位大神的代码里获取到齐全兼容shaderToy的思路。并将其改成更实用在hexo中。 示例代码 <!-- 至多须要一个div来搁置iframe，这样能够不便的将代码移入文章底部 --><div id="three"></div><script type="module" id="threeMain">if (!(self.frameElement && self.frameElement.tagName == "IFRAME")) { import("http://localhost:4000/uploads/createTHREE.js").then((result) => result.initHexoThreeModule(document.getElementById("three"),document.getElementById("threeMain")));} else { // 这里的代码会被间接执行，window指向iframe内的window（其实就是把代码整个挪动到了iframe内） import('http://localhost:4000/uploads/glsl_snippets.js').then(async res=>res.glsl_snippets(res.anotherGlsl))}</script>显示成果 嵌入threejs3D场景 个别状况下不倡议在一个页面放多个成果如有必要，能够通过交互时渲染，在视图内渲染等办法优化，防止页面卡死 倡议clone下这个仓库并运行起来，这两个成果都是能够交互的，也能够间接拜访我的小站查看成果https://moshuying.top 实现原理起因就是hexo对md文件中的script会渲染到页面上，然而不会显示进去，这就有短缺的操作空间了。 这里应用iframe的次要起因就是避免来回切换页面导致的webgl上下文问题。不然也不至于这么麻烦。 // 创立iframe并返回iframe内的window对象function createIframe(divNode) { return new Promise((resolve) => { let iframe = document.createElement("iframe"); // ... iframe.style = "position: absolute; width: 100%; height: 100%; left: 0; top: 0;border:none;"; iframe.onload = () => resolve(iframe.contentWindow); divNode.style = "position: relative; width: 100%; height: 0; padding-bottom: 75%;"; divNode.appendChild(iframe); });}创立完iframe后能够为iframe中加载对象了，之前应用的是经典前端的script src加载形式，思考到可能会被用到，这里保留了函数不便后续批改。理论应用中利用module中的import()函数间接引入在线文件即可 ...

依据hexo官网文档 配置_config.yml文档，配置deploy，配置内容如下 type: git repo: githu地址 branch: gh-pages在执行 hexo clean && hexo deploy始终报错，报错信息如下 之前关注的点是 ExperimentalWarning: The fs.promises API is experimental这个异样信息提醒，是node版本过低有一些组件不反对最新版的hexo（5.0.0），然而无伤大雅； 通过排查，发现是deploy配置项的缩进谬误，而后调整这部分代码为 type: gitrepo: githu地址branch: gh-pages这里特地留神 后面的空格没了，此时可能失常执行 hexo clean && hexo deploy如果只是这样配置，那么会呈现一个问题，就是hexo d 失常执行了，然而github page没有变动，咱们执行的时候也没有报错，只能在本地服务器看到失常的页面，到此处咱们须要欠缺咱们的配置信息，配置为： deploy: type: git repo: github: github page地址 branch: gh-pages 欠缺之后，再执行hexo d就能够失常看到咱们所推送的页面信息了

能动收不多说开源评论零碎 remark42 上手指南 前言写博客嘛， 谁不喜爱本人倒腾一下呢。 从自建零碎到 Github Page， 从 Jekyll 到 Hexo， 年老的时候谁不喜爱多折腾折腾呢。 年纪稍稍长了一下之后， 最初我本人还是选了 Hexo 间接做动态博客生成， 联合一下 Gitlab CI 推代码之后主动构建之后更新到本人的服务器了。 起初又基于“多说”间接反对了博客内容评论， 再起初，多说倒下了，评论性能就始终没有保护了。 前阵子因为某些需要，对市面上局部评论零碎做了一次调研， 这时候发现其实大家都做了好多轮子了，近期空进去了终于能够再玩玩了。 开源评论零碎调研调研前提： 开源，协定敌对，可商用我的项目代码“失常”（切实不太想看 Ruby/PHP），保护踊跃部署简略，二开不便上面间接扔了上次的调研后果进去。 vkuznecovas/mouthfulMouthful is a self-hosted alternative to Disqus https://mouthful.dizzy.zone/Golang 编写，反对 MySQL、PG、SQLIte，反对评论审核保护状态：2018 年之后没看到更新了FeaturesMultiple database support(sqlite, mysql, postgres, dynamodb)Moderation with an administration panelServer side caching to prevent excessive database callsRate limitingHoneypot feature, to prevent bots from posting commentsMigrations from existing commenting engines(isso, disqus)Configuration - most of the features can be turned on or off, as well as customized to your preferences.Admin login through third parties such as facebook and twitter, and 35 more.Dumping comments out, and importing an old dump.schn4ck/schnackSimple self-hosted node app for Disqus-like drop-in commenting on static websites https://schnack.cool/Node js 编写, SQLite, 没看到其余数据库的反对保护状态：最初一次更新是 15 个月前FeaturesTiny! It takes only ~8 KB!!! to embed Schnack.Open source and self-hosted.Ad-free and Tracking-free. Schnack will not disturb your users.It's simpy to moderate, with a minimal and slick UI to allow/reject comments or trust/block users.webpush protocol to notify the site owner about new comments awaiting for moderation.Third party providers for authentication like Github, Twitter, Google and Facebook. Users are not required to register a new account on your system and you don't need to manage a user management system.adtac/commentoA fast, bloat-free comments platform (Github mirror) https://commento.iogolang 编写，反对 PG保护状态：两个月还在更新，反对本地部署https://docs.commento.io/What features does Commento have?Commento comes with a lot of useful features out-of-the-box: rich text support, upvotes and downvotes, automatic spam detection, moderation tools, sticky comments, thread locking, OAuth login, email notifications, and more!posativ/issoa Disqus alternative https://posativ.org/isso/Python，SQLIte，引入了 ORM 组件然而临时没看到其余数据库的反对Admin panel to moderate comments保护状态：沉闷，几天前还在更新Isso – Ich schrei sonst – is a lightweight commenting server written in Python and JavaScript. It aims to be a drop-in replacement for Disqus. ...

本文最后公布于我的集体博客Bambrow's Blog，采纳 BY-NC-SA 许可协定，转载请注明出处。若有后续更新，将更新于原博客。欢送去我的博客浏览更多文章！ 本文具体记录一下站点建设过程，以便查阅。对于具体的细节则不会做过多解释，次要展现步骤。这一篇次要讲述筹备工作、首次部署与主动部署的相干内容。 本文运行环境： node: v14.4.0npm: 6.14.7hexo: 4.2.1hexo-cli: 3.1.0筹备工作筹备工作次要参考了Hexo官网文档。 装置Git与Node.js在Mac上最不便的办法当然是通过Homebrew。 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"留神，可能在装置之前须要先装置Command Line Tools for Xcode。间接在终端输出xcode-select --install装置。 装置好Homebrew后，间接应用以下命令： brew install gitbrew install node在装置以上两个依赖之前，能够先运行brew update来更新Homebrew。此外，还能够运行brew doctor检查一下有没有什么抵触，能够及时处理。也能够把以下语句退出你的.bash_profile或者.zshrc，取决于你应用的shell： export PATH="/usr/local/bin:$PATH"装置好后，能够用以下命令查看是否装置胜利，胜利则会返回版本号： git --versionnpm -v装置Hexo间接应用npm装置： npm install -g hexo-cli查看一下hexo是否装置胜利，会返回以后的hexo版本号： hexo -v注册GitHub并新建集体仓库GitHub就不必多说了。注册实现后，新建私有仓库，名称为你的GitHub用户名.github.io。这个仓库用来寄存渲染好的页面。 此外，咱们再新建一个公有仓库，用来寄存源文件自身。仓库的名字任意取，我取的名字是blog。 这两个仓库最好不要初始化任何货色，也就是README，.gitignore和license都不要。这样新建的仓库齐全是空的。 设置Git与密钥文件首先运行以下两句进行Git配置： git config --global user.name "GitHub用户名"git config --global user.email "GitHub注册邮箱"其中把用户名和邮箱替换成你本人的。而后咱们生成密钥文件： ssh-keygen -t rsa -C "GitHub注册邮箱"间接一路回车上来就好，完结后会在~/.ssh/文件夹里生成id_rsa私钥文件与id_rsa.pub公钥文件。咱们读取一下公钥的内容并且手动拷贝： cat ~/.ssh/id_rsa.pub手动复制显示的内容。随后关上这个页面设置SSH Key。你也能够在GitHub主页点击你的右上角头像，抉择Settings，而后抉择SSH and GPG Keys找到这个界面。点击New SSH Key，题目能够轻易写，内容就是你方才复制的公钥内容，随后保留。 开始建站博客初始化首先抉择一个你喜爱的中央作为你的博客根目录。 ...

参考文档： 标签插件参考：https://hexo.io/plugins/ 性能插件参考：https://hexo.io/zh-cn/docs/tag-plugins 资源文件夹参考：https://hexo.io/zh-cn/docs/asset-folders.html Markdown(md)写作模板：https://www.bas369.com/more/learning_notes/2020/03/14/Markdown%E5%86%99%E4%BD%9C%E6%A8%A1%E6%9D%BF/ 1.标签插件介绍Hexo官网的标签插件参考链接： https://hexo.io/zh-cn/docs/tag-plugins 若官网的参考文档表述不明； 请参考官网的 代码库 联合 浏览器的 F12 调试性能进行测试； 标签插件代码库的装置门路为：\node_modules\hexo\lib\plugins\tag 以下的测试阐明，基于 Hexo 的官网主题进行，未进行基于其余主题的测试； 其余主题可能存在 bug ，因为其余主题可能会批改官网默认的标签插件设置； 标签插件的固定格局为：花括号% 属性 其余参数 %花括号 属性 指 html 标签 或者 hexo 事后定义的标签； 例如：img 、link 、 asset_img 、post_link 等等； hexo根目录的局部配置（留神：不是主题目录的配置）阐明： index_generator: path: '' per_page: 10 # 定义每一个分页显示多少篇文章；0 示意首页显示全副文章； order_by: -date # Pagination ## Set per_page to 0 to disable pagination per_page: 10 # 定义文章归档页面，每一个页面显示多少篇文章明细； pagination_dir: page 2.文章增加图片关上我的项目根目录的配置文件 config.yml ，留神，不是主题的配置文件； 将配置文件中的 post_asset_folder 选项设为 true 来关上； 这样的话，在执行 hexo new post 文章 ，新建 文章.md 文件的时候； 会同时建设同名的 文章 资源文件夹；如果没有资源须要从 文章 资源文件夹 援用，那么能够删除该文件夹，hexo 在执行渲染的时候，不会出错；而且 文章 资源文件夹在通过 hexo 执行 html 渲染后，文件夹也会被删除； 文件夹的资源会被挪动到与 文章.html 雷同的目录； 所以，在 文章.md 援用文件夹资源的时候，才不须要蕴含门路； ...

原文发表于我的博客， 特此做版权申明 CSDN: 优雅的将hexo到github和coding Noosphere.site: 优雅的将hexo到github和coding1. 前言上次写了篇文章 应用github action同时部署hexo到github和coding最优雅的形式，从实现原理的角度做了介绍，因为实现的指标比拟多，所以看起来比较复杂，这次咱们不讲原理，仅仅按实现目标来介绍如何配置。 1.1 指标先说咱们要实现的指标，而后再按指标来介绍办法 hexo的source寄存在独立公有库jiuhao生成的动态文件寄存在github和coding独立的库本地能够通过 hexo d -g一个命令一次性部署到github和coding能够通过git push推送到github的surce仓库后，由action触发部署到github和coding的动态仓库同时实现3和4，只须要配置一次_config.yml。而不须要在action外面写死指标动态仓库的地址，不便保护反对多个github账号，同时也反对多个coding账号阐明： 指标 1 把 source 放在独立的公有库是安全性思考指标 3 和 4 是不便能够应用两种办法都能达到部署的指标， 3 是手工部署， 4 是通过git push触发，比方 github 的 action 可能某些起因失败了，临时又没工夫去保护，那么我能够间接在本地hexo d -g部署就行指标5是实现3和4的时候，两种办法的指标仓库(publish repo)地址配置只须要一处保护，不须要扩散在 _config.yml 和 github action指标 6 是可选指标。 如果不须要辨别工作和私人用的github 账号，能够不须要理睬这个指标。1.2 已有的解决方案剖析为了达到下面这些指标，我找了一轮市面上各种各样的解决方案，没看到齐全符合要求的。次要问题包含 github action market上的hexo action没有反对同时部署到github和coding的action能够间接重用github action market上已有的hexo action的deploy形式无非两种，一种是间接把指标(publish repo)仓库地址配置action，一种是间接应用source外面_config.yml的配置. 如果是前者，则意味着咱们须要吧publish repo写在两个中央，一个是本地的_config.yml一个是action。保护起来比拟麻烦。显著应该应用后者。其余的一些博客提到的办法外面，大多存在后面一点存在的问题，而且大多是间接在action里定制脚本，没有抽成action，不不便重用。就这样，观摩了一轮，我决定fork一个github mark上的hexo action进去，按需要本人弄一个action，通过考查，[sma11black/hexo-action](https://github.com/sma11black/hexo-action)这个action比拟靠近需要，只须要简略革新就能够应用，怎么革新这里就不说了，{% post_link hexo-action-deploy-to-coding-and-multi-account 见上一篇文章%} 通过简略革新的action的仓库是 [noosphere-coder/hexo-action@master](https://github.com/noosphere-coder/hexo-action),上面咱们间接应用就好 2 注释2.1 只实现目标1-5的配置排除掉指标6，只须要是实现下面说的1-5的指标，也即是咱们能够应用咱们平时曾经在github和coding外面应用的ssh key就好。那么配置很简略 ...

hexo应用hexo-submit-urls-to-search-engine插件后，可被动推送Hexo博客新链接至谷歌、必应、百度搜索引擎站长平台以晋升网站收录品质和速度。 之前的插件都只反对百度，仅供“局域网”应用…… 当初我的一篇文章刚公布 5 分钟，即可在必应搜寻到。看吧，这就是 hexo-submit-urls-to-search-engine 的威力。 装置在 Hexo 根目录下执行指令： $ npm install hexo-submit-urls-to-search-engine --save应用在 Hexo 根目录下的 _config.yml 文件中，增加以下配置项： hexo_submit_urls_to_search_engine: # 提交最新的 n 个链接 count: 10 # 提交批改工夫在 n 秒内的链接，单位秒。例如： # 有两个文件 a.txt 和 b.txt，别离对应 https://yoursite.com/a.txt 和 https://yoursite.com/b.txt # 其更新工夫距以后别离为 800s 和 1000s（period 字段设为 900） # 则 https://yoursite.com/a.txt 会被提交，https://yoursite.com/b.txt 不会 period: 900 # 提交链接的条件，可选值：count | period。不同取值的含意如下： # count ：利用上述的 count 配置项 # period：利用上述的 period 配置项 submit_condition: count # 是否向 Google 提交，可选值：1 | 0（0：否；1：是） google: 0 # 是否向 Bing 提交，可选值：1 | 0（0：否；1：是） bing: 1 # 是否向 Baidu 提交，可选值：1 | 0（0：否；1：是） baidu: 1 # 文本文档的地址，要推送的链接会保留在此文本文档里 txt_path: submit_urls.txt # 在百度站长平台中注册的域名 baidu_host: https://yoursite.com/ # 百度主动推送 API 的 token（获取形式见插件文档：https://cjh0613.github.io/blog/20200603HexoSubmitUrlsToSearchEngine.html） baidu_token: xxxxx # 在必应站长平台中注册的域名 bing_host: https://yoursite.com/ # 必应主动推送 API 的 token（获取形式见插件文档：https://cjh0613.github.io/blog/20200603HexoSubmitUrlsToSearchEngine.html） bing_token: xxxxx # 在谷歌站长平台中注册的域名 google_host: https://yoursite.com/ # 寄存 google key 的 json 文件，放于网站根目录 google_key_file: google_key.json当然你也能够应用环境变量记录私钥，这样即便源码放在公开仓库，也不会泄露秘钥。 ...

背景如何做团队技术文章分享和沉淀？这是一个老生常谈的话题。常见的技术选型可以是 Confluence、Dokuwiki、Gitbook 等。 但对于敏捷团队来说，这些都不够优雅，我们希望能把技术文章像代码一样进行协作和版本管理。更新技术文章后，能够自动部署到公司的 K8S 集群。那么，CODING DevOps + Hexo 一定是你的不二之选，这也是 CODING 目前的实践。 Hexo 是一个快速、简洁且高效的博客框架。我们只需要书写 Markdown 格式的技术文章，通过命令能够直接生成静态页面，方便浏览和部署。 本文将介绍如何使用 CODING DevOps 建立流水线，推送技术文章到 Git 仓库后，自动触发流水线执行构建并部署到 K8S 集群。 准备K8S 集群，推荐使用腾讯 TKE开通 CODING DevOps克隆代码仓库：https://wangweicoding.coding....实现效果提交新文章，自动触发构建流程 生成静态页面，构建 Docker 镜像 镜像构建成功，自动触发部署流程 部署成功，新文章发布 实践步骤1. 克隆代码并推送到自己的 CODING Git 仓库git clone https://e.coding.net/wangweicoding/blog.gitgit remote set-url origin [CODING Git Url]git push2. 开通 CODING 制品库开通 Docker 类型的制品库，并记录仓库地址和制品库名称，将在下一个阶段用到。 3. 开通 CODING 持续集成，并配置构建任务选择“自定义构建过程”，并配置来源使用代码仓库的 Jenkinsfile 项目内的 Jenkinsfile 主要是用来生成静态页面，以及构建镜像并推送镜像到制品库。 pipeline { agent any stages { stage('检出') { steps { checkout([ $class: 'GitSCM', branches: [[name: env.GIT_BUILD_REF]], userRemoteConfigs: [[url: env.GIT_REPO_URL, credentialsId: env.CREDENTIALS_ID]] ]) } } stage('生成静态页面') { steps { script { sh 'npm install -g hexo-cli' # 安装 Hexo sh 'npm install' # 安装依赖 sh 'hexo g' # 生成静态页面 } } } stage('构建') { steps { echo '构建中...' script { // 此处请修改 dockerServer、dockerPath、imageName 替换为自己项目的值 dockerServer = 'wangweicoding-docker.pkg.coding.net' dockerPath = '/blog/blog' imageName = "${dockerServer}${dockerPath}/blog:${env.GIT_BUILD_REF}" def customImage = docker.build(imageName) // 推送 Docker 镜像到仓库 docker.withRegistry("https://${dockerServer}", CODING_ARTIFACTS_CREDENTIALS_ID) { customImage.push() } } } } }}注意：请将 Jenkinsfile 内变量 dockerServer、dockerPath、imageName 修改为自己的制品库地址、制品库名 、制品名。 ...

HexoHexo是一个基于Node.js，快速、简洁且高效的博客框架。Hexo使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 开始搭建本文环境1）操作系统：Window 102）Node.js：v10.16.3 (x64)3）Hexo：v3.9.01.安装Git进入Git官网下载自己系统对应的版本，安装过程一路点下一步。2.安装Node.js进入Node.js官网下载自己系统对应的版本。这里有两个版本，我选的是LTS版本（稳定版），Current是最新版，安装过程一路点下一步。检查Node.js是否安装成功：① 在任意目录右键选择Git Bash② 输入命令 node -v 按回车查看版本信息。③ 出现如下图版本信息则安装成功。3.安装Hexo安装Node.js包管理器： Hexo安装我们需要使用npm，全称node package manager，它是Node.js的包管理器。① 安装Node.js的时候npm就顺带安装好了，输入 npm -v 命令可以查看npm版本信息。 ② 由于npm安装插件包是从国外服务器下载，速度会比较慢。所以我们使用淘宝团队提供的cnpm下载速度会快点。 ③ 通过npm安装cnpm，在命令行中输入如下命令然后按回车 npm install -g cnpm --registry=https://registry.npm.taobao.org④ 等待安装完成后，输入 cnpm -v 命令出现如下信息则安装成功。 使用cnpm安装Hexo框架： ① 输入如下命令，然后按回车执行命令： cnpm install -g hexo-cli② 等待安装完成后，输入 hexo -v 检查是否安装成功： 4.使用Hexo搭建博客生成博客：① 在任意目录使用 hexo init [folder] 命令来生成我们的博客，如下我在D盘生成。 ② 等待命令执行结束后，就可以看到博客文件夹了。名字由上面的folder参数来指定，如下我的博客目录名称是MyBlog 测试博客：① 进入到博客根目录，输入命令 hexo s 启动本地服务测试博客。 ② 在浏览器中输入localhost:4000，就可以看到我们博客的默认效果了。 ③ 回到命令行，按快捷键Ctrl + C即可关闭服务。 至此，博客搭建完成了，接下就可以使用Hexo愉快地写博客了~

概述我的博客本文总结一下 Hexo 搭建博客的主要流程，能够在日后快速恢复博客环境。 Hexo 的官方文档写的已经很全面了，本文仅将一些注意点列出。欢迎加入前端交流群：749539640 安装 Hexo 的文档参考： Hexo 文档前提安装 Hexo 之前，你的电脑上需要有 Node.jsGit如果是 Mac 用户， 您在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具 安装 Hexo全局安装 hexo-cli： npm install -g hexo-cli如果遇到权限的问题，可以使用如下命令： sudo chown -R $(whoami) /usr/local/lib/node_modules/设置 /usr/local/lib/node_modules/ 文件夹属于当前用户。 此外，如果你要使用 root 权限安装的话，可以使用 sudo -s 切为 root 用户进行相关操作。这么做的话，会将一些文件夹的默认属组设置为 root 了，不推荐。 npm 权限问题： Global installs (sudo npm i -g) fail on Mac after 6.5 upgrade. Works fine after 6.4.1 downgradenpm，yarn如何查看源和换源建站hexo init MyBlogcd MyBlognpm install执行完毕之后，博客其实已经 OK 了： ...

什么是 hexo-plugin-gitalk ???? Hexo 整合 gitalk 组件实现博客评论功能???? 主页效果 用法Step #1 - 更新 _config.yml 配置文件在 _config.yml 配置文件中,配置 gitalk 插件相关信息,详情见 gitalk. plugins: gitalk: clientID: GitHub Application Client ID clientSecret: GitHub Application Client Secret repo: GitHub repo owner: GitHub repo owner admin: - GitHub repo owner and collaborators, only these guys can initialize github issues distractionFreeMode: false注意: 前往 gitalk 申请开通 gitalk 功能后,一定要替换成自己的相关配置!其中,主要配置参数含义如下: clientID String必须. GitHub Application Client ID. clientSecret String必须. GitHub Application Client Secret. ...

U盘便携式hexo随处写博客 简述：在任意一台联网的电脑上续写hexo博客，一个U盘+几个网站即可搞定。便携式hexo，其免去Nodejs 和 Git 的安装和配置还包含了配置和懒人脚本。好处就是省事、简单、方便 便携式hexo下载及使用方法，由 HEXO Portable | 比特萌信息技术 免费提供服务。（这里使用的版本是1.0.3）几个网站：折腾选用：hexo中文文档详细教程 Hexo，博客主题汇总 Themes在线markdown编辑预览器，由 Cmd Markdown 编辑阅读器 免费提供服务。免费且安全的图床，由 Simple Free Image Hosting 免费提供服务。hexo博客搭建 效果：参考上述便携式hexo下载及使用方法，我们已经完成了便携版博客的搭建。其本地文件夹如下：极速纯净低bug主题推荐 简述：hexo社区提供了很多主题，很多主题由个人或者小团体开发，综合主题本身的容错性、网站的访问速度、阅读体验、网页自适应等多方面因素，推荐使用 pure 主题。 实现：这里选用并下载 pure 主题->修改文件夹名称为 pure 该主题文件夹存放至PortableHexohexothemes 文件夹中->修改博客配置文件_config.yml 使用主题为 pure ->运行 渲染并本地测试.bat 文件 -> 浏览器访问 localhost:4000 预览， 该主题相关详细信息可前往 cofess/hexo-theme-pure 查看。修改博客配置文件_config.yml 使用主题为 pure浏览器访问 localhost:4000预览部署到coding 简述：托管在github上会严重降低网站的访问速度，可选择国内的coding平台并开启codingpages 服务。这需要以下简单的步骤。 注册coding。coding的官网地址：CODING - 一站式软件研发管理平台新建仓库也就是coding里的项目（项目名称要和coding的用户名保持一致）本地生成sshkey，coding部署公钥，这需要以下几个步骤：首先我们对PortableHexosupportscript下原有的 deploy.sh文件进行修改。设置固定的git用户名及邮箱，并用其生成唯一的sshkey，存放在PortableHexo/home 下。替换deploy.sh全部内容为下述代码： echo ""unset HOMEunset USERPROFILEunset HOMEPATHexport HEXOPHOME=dirname $PWD/homeexport HOME=$HEXOPHOMEexport USERPROFILE=$HEXOPHOMEexport HOMEPATH=$HEXOPHOME 每次都会重置用户名及邮箱git config --global user.name "example"git config --global user.email "example@example.com" ...

之前的这篇文章《Linux下使用 github+hexo 搭建个人博客01-hexo搭建》，相信大家都知道怎么搭建 hexo ，怎么切换主题，并且完成了一篇博文的创建，以及 MarkDown 标记语法的用法。如果还不清楚或者不知道的，那就先回去看看这篇文章。 那么我们接下来就需要将 hexo 和 GitHub Pages 结合了，为什么要结合呢？因为当前我们的博客还是在本地机器，如果因为我们不小心删了数据，或者购买的云服务因为没有及时续费，导致机器被释放了，那我们就永久失去了这些数据。 因此如果这些数据对我们还有用，并且想永久保存，那么就需要找个类似 SVN 或者 Git 之类的代码版本托管仓库了。那理所当然选 GitHub 了，就当前环境还有比 GitHub 更好的吗。 注册 GitHub 账号GitHub 官网： https://github.com/具体注册过程也很简单，这里就不说了。请自行注册。 使用 GitHub Pages创建指定的 GitHub 仓库点击创建按钮 仓库名称和配置选择 开启 GitHub Pages进入 Settings 默认已开启 GitHub Pages 选择主题 浏览器访问https://zhanglianghhh.github.io/ 在 GitHub 上添加 SSH Keys 信息为了能将个人博客服务器上的博客数据推送到 GitHub，达到数据永久保存效果，我们需要把博客服务器的 SSH keys 信息在 GitHub 上添加信任。 本地服务器创建 ssh-key 信息[root@zhangblog ~]# ssh-keygen -t rsa # 如果遇见等待输入的地方，按下 Enter 回车键即可，无需任何其他输入Generating public/private rsa key pair.Enter file in which to save the key (/root/.ssh/id_rsa): Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has been saved in /root/.ssh/id_rsa.Your public key has been saved in /root/.ssh/id_rsa.pub.The key fingerprint is:SHA256:73zrQW4LTBgAVqQKvOoTxFrgaGF/sobf643Q+3w7or0 root@zhangblogThe key's randomart image is:+---[RSA 2048]----+| o++ ||oo . . . ||*oo . . ||.*o+ . o ||+oo + S . . ||oo o. + o ||. +... + + ||.. ...*. = o.o || .. .*+E+.=o+. |+----[SHA256]-----+[root@zhangblog ~]# cd .ssh/[root@zhangblog .ssh]# lltotal 12-rw------- 1 root root 0 Jun 3 17:02 authorized_keys-rw------- 1 root root 1675 Jun 5 14:17 id_rsa-rw-r--r-- 1 root root 396 Jun 5 14:17 id_rsa.pub-rw-r--r-- 1 root root 395 Dec 14 17:15 known_hosts[root@zhangblog .ssh]# cat id_rsa.pub # 具体的公钥信息ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQD4iDDDDDDDDDDgMMutdH7KdI5P7BrtHbfRG+MYyr1/Gtz45hJgbVHBCTFZaTn2+MekFQcZVkyc2kEU7L7mm4ZGWkStgbXkas+uTFwo3kLlX8ozcUC3jM8rhzbWPv8piq58ezBnrMZ0zNsCgHGXpokUmLqYt1mpLXz5rsOzwGgHHkp+Wlr+6tTQxr/+9T4CiE/RkFKi/mehn01rjOcVluYSkwkVii03EzMlMcoyV3ctnWzwyZIWAQAsvDSN2CQAdRtaUHOJOAoRv8/s4jDiWU1ia0JYmm2D/IWcLl2hxNtGeVHTFk9l1djtUQu47zuoOM4y6ySlUx28HNIAMw14gjIv5 root@zhangblogGitHub 添加 SSH Keys ...

有时候我们希望有一个受控的博客，来记录或分享一些东西。这个博客的主题内容由你自己来决定，可以是技术分享(编程、汉化分享等)，也可以是生活感想。 本文将介绍一个可以迅速搭建并部署的受控博客。阅读本文前，希望你对以下知识点有所了解: git(版本控制) 的基础使用markdown 的使用为什么要搭建博客在线类博客有很多选择，为什么我们需要从零搭建新的博客呢？自己搭建的博客有什么好处吗？ 首先，前文所提的 “博客受控”，指的就是能够自己控制的博客的样式、内容等，自己想怎么改就怎么改。 内容受控是指我们知道在线类的博客是受平台限制的，这意味着你所发表的内容是需要受审才能发出的，一些敏感的技术词汇，该篇文章都可能会被和谐或被删除。但在自己搭建博客就没有这样的问题，最起码能保留源文件。 其二，博客的样式是受控的。像著名在线博客CSDN上一些博主的文章确实是有学习参考的价值，但问题的是该站广告是在是太多了，字体和排版的阅读体验并不太好。但如果是自己搭建的博客的话，就可以自己着手优化这些问题。 但博客的搭建还需要我们从各方面考虑利弊。平台类博客会有相应的推荐系统，会对同类型文章相互引流，在 SEO 方面会做得比我们好。 个人搭建的博客，刚起步时的浏览量并不高，但是可以通过SEO等方式来逐步增加自己网站的权重。或者提高博客的质量和干货，读者认为文章有价值，自然会收藏起来形成熟客。 那么博客能写什么东西呢？在日常生活中，有很多知识点是呈碎片状，写博客的本质上就是对自己知识的一种梳理，然后再将这些知识分享出来，可能会有对这方面知识有疑惑，或者想找到解决方案，自身分享出来的东西能给读者做一定的参考。同时这也会是一个良性循环，因为分享的同时，你可能也需要去查询一些资料，同时也可以找到别人遇到过并分享出来的解决方案，是一个相互收益的过程。 我们的基本需求是梳理与分享，那么更应该把注意力放在内容本身，网站布局的排版样式等则是增加读者阅读体验的问题。因此我们可以使用现成的博客框架快速完成这些事。 博客框架有很多种选择，笔者选择的是 Hexo，因为它足够便捷优雅。 startHexo 依赖 Node.js 和 NPM包管理，Node.js 安装后一般会自带NPM。 我们打开终端(Windows PowerShell / cmd.exe、bash、macOS 里的终端)，输入以下命令: # 检查 npm 是否安装成功npm -v# 安装 hexo cli，# 如果安装速度过慢的话，可以安装国内的淘宝镜像# 在命令行输入 ` npm install -g cnpm --registry=https://registry.npm.taobao.org`npm install -g hexo-cli# 检查 hexo 是否安装成功，并查看版本hexo -v依赖安装成功后，我们可以在命令行输入 hexo help 查看使用方式(描述是英文，示例部分笔者将其转为中文): Usage: hexo <command> commanddescriptionhelp获取命令的帮助init创建一个新的 Hexo 文件夹version显示版本信息使用 hexo help [command] 可以查看更多的信息, 如: hexo help init# Usage: hexo init [destination]# Description(描述):# 在指定的路径或当前目录中创建一个新的Hexo文件夹.# Arguments（参数）:# destination 文件夹路径。 如果未指定，则在当前文件夹中初始化# Options（选项）:# --no-clone 复制文件而不是从GitHub克隆# --no-install 跳过 npm 依赖安装(默认初始化会自动装依赖)全局选项： ...

Cloud StudioCloud Studio是在线集成开发环境，它提供了完整的 Linux 环境, 并且支持自定义域名指向。IDE 中有近 20 种开发环境，支持一键切换，进度实时保存。 Hexo快速、简洁且高效的博客框架，Hexo依赖于Node.js，并且使用Markdown解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 随时随地搭建？我们都知道，Github、码云、Coding都免费提供了静态网页托管服务，我们写好的代码上传到托管平台，通过pages服务可以实现外网访问。文章开头所述，Cloud Studio提供了完整的 Linux 环境，并且进度实时保存，我们只要有浏览器就可以随时开发并且部署，配合Pages服务，不用买服务器，就可以拥有自己的博客系统。 说了这么多，就是想让大家了解一下工作原理，下面让我们开始吧！创建仓库首先，我们打开腾讯开发者平台)（需要注册腾讯云账号），点击右上角+号，新建项目。然后按照图示，开启pages服务。 新建工作空间打开Cloud Studio)官网，点击新建工作空间，来源选择“腾讯云开发者平台”，项目选择上一步创建的仓库，运行环境选择Hexo。 搭建Hexo生成所需文件由于我们选择的运行环境为Hexo，所以工作空间自带了Node.js、Git，hexo-cli。我们只需要运行以下命令就可以。 hexo init <folder>cd <folder> npm install启动服务器hexo cleanhexo dhexo s创建访问链接通过Cloud Studio右侧栏“访问链接”测试是否成功。 需要注意的是：端口改为4000，选择创建链接，然后点击创建的链接即可访问。部署到Pages安装 hexo-deployer-gitnpm install hexo-deployer-git --save修改 _config.yml 参数打开站点配置文件_config.yml，修改deploy属性。 deploy: type: git repo: https://gitee.com/giteetop/giteetop.git branch: masterrepo：你的仓库地址，可以是Github、Gitee以及Coding。部署hexo cleanhexo g -d过程中输入仓库的账号和密码，等待提交完成，然后就可以生成静态页面了。 常见问题如果生成静态页面后，发现页面没有样式了，这是因为使用了域名访问，但是没有配置url路径。打开站点配置文件_config.yml，修改url和root属性。 # URL## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: http://yoursite.com/root: /permalink: :year/:month/:day/:title/permalink_defaults:如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

Typora本身支持flow、mermaid语言绘制时序图、甘特图、流程图等等。若要你的博客也支持解析渲染这些语言描绘的图表，则需要查看博客框架是否支持，然后进行相关配置。以Hexo为例，原生不支持，但是可以通过安装插件实现以上图表的显示。 hexo-filter-mermaid-diagrams mermaid diagrams for Hexo.在Hexo中识别并生成由mermaid编写的图表。 可以通过修改Hexo或其他主题的重写博客CSS框架文件，改变渲染出的图表样式。 例如，在Icarus主题中，修改icarus/source/css/style.styl文件，添加以下代码实现图表背景透明： .mermaid { background: transparent;}其他配置参考：https://github.com/knsv/merma... hexo-tag-plantuml hexo-tag-plantuml is a tag plugin for Hexo. It can work with plantuml to draw uml.在Hexo中绘制uml图。 hexo-filter-flowchart Generate flowchart diagrams for Hexo.在Hexo中识别并生成由flow编写的图表。 标准流程图使用mermaid绘制流程图graph TD; A-->B; A-->C; B-->D; C-->D; 使用flow绘制流程图st=>start: 开始框op=>operation: 处理框cond=>condition: 判断框(是或否?)sub1=>subroutine: 子流程io=>inputoutput: 输入输出框e=>end: 结束框st->op->condcond(yes)->io->econd(no)->sub1(right)->opst=>start: 开始框op=>operation: 处理框cond=>condition: 判断框(是或否?)sub1=>subroutine: 子流程io=>inputoutput: 输入输出框e=>end: 结束框st->op->condcond(yes)->io->econd(no)->sub1(right)->op时序图sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!甘特图（Gantt）gantt dateFormat MM-DD title 软件开发甘特图 section 设计 需求: done,des1, 01-06,01-08 原型: active, des2, 01-09, 3d UI设计: des3, after des2, 5d 未来任务: des4, after des3, 5d section 开发 学习准备理解需求: crit, done, 01-06,24h 设计框架: crit, done, after des2, 2d 开发: crit, active, 3d 未来任务: crit, 5d 休息: 2d section 测试 功能测试: active, a1, after des3, 3d 压力测试: after a1 , 20h 测试报告: 48h UML图PlantUML 是一个允许你快速编写一下图表的组件 : ...

一、前言如上图所示：GitHub有Github Pages，而码云也有码云 Pages 1、Github Pages或Gitee Pages是什么呢？Github Pages或者Gitee Pages是一个免费的静态网页托管服务，我们可以使用它来托管博客、项目官网等静态网页。 之前小编也有写过关于GitHub搭建个人博客教程，其采用Jekyll模板搭建~目前码云 Pages 支持 Jekyll、Hugo、Hexo编译静态资源。 2、Jekyll、Hugo、Hexo 是什么？温馨小提示：码云上是如下介绍这三者Jekyll、Hugo、Hexo 是简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown 以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll、Hugo、Hexo 也可以运行在 码云（Gitee.com） Pages 上，也就是说，你可以使用码云的服务来搭建你的仓库页面、博客或者网站，而且是完全免费的。 Jekyll 使用文档：https://www.jekyll.com.cn/doc...Hugo 使用文档：https://gohugo.io/documentation/Hexo 使用文档：https://hexo.io/docs/下面小编将介绍使用其中的Hexo来搭建个人博客的全过程~ 3、为什么采用Hexo呢？原因是Hexo基于NodeJS实现，而目前主流的vue前端一般都是使用npm或者yarn来跑项目，因此使用hexo搭建个人博客，易学，且搭建环境相对简单~ 而 Hexo官网 上这样介绍它:Hexo是一个快速，简单和强大的博客框架。您使用Markdown（或其他语言）撰写帖子，Hexo会在几秒钟内生成具有漂亮主题的静态文件。二、安装基本环境1、Git ： https://git-scm.com/downloads2、Node.js ： https://nodejs.org/en/三、安装Hexonpm install -g hexo-cli四、初始化项目 -> 配置 -> 部署到码云访问 -> 本地运行1、初始化项目在项目预存位置，cmd或者git bash执行如下命令： hexo init blog # 注：blog为执行完此命令后项目所在文件夹名完成后，生成如下文件： 2、修改站点配置文件 _config.yml可参考Hexo官网提供文档进行修改：https://hexo.io/docs/configur...注：deploy部署需要安装 hexo-deployer-git npm install hexo-deployer-git --save我的修改如下： # Hexo Configuration## Docs: https://hexo.io/docs/configuration.html## Source: https://github.com/hexojs/hexo/# Sitetitle: 郑清的个人博客subtitle: zhengqing's blogdescription: Hello,here is zhengqing's blog.keywords:author: 郑清language:timezone:# URL## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: http://zhengqingya.gitee.io/blogroot: /blog/permalink: :year/:month/:day/:title/permalink_defaults:# Directorysource_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render:# Writingnew_post_name: :title.md # File name of new postsdefault_layout: posttitlecase: false # Transform title into titlecaseexternal_link: true # Open external links in new tabfilename_case: 0render_drafts: falsepost_asset_folder: falserelative_link: falsefuture: truehighlight: enable: true line_number: true auto_detect: false tab_replace: # Home page setting# path: Root path for your blogs index page. (default = '')# per_page: Posts displayed per page. (0 = disable pagination)# order_by: Posts order. (Order by date descending by default)index_generator: path: '' per_page: 10 order_by: -date # Category & Tagdefault_category: uncategorizedcategory_map:tag_map:# Date / Time format## Hexo uses Moment.js to parse and display date## You can customize the date format as defined in## http://momentjs.com/docs/#/displaying/format/date_format: YYYY-MM-DDtime_format: HH:mm:ss# Pagination## Set per_page to 0 to disable paginationper_page: 10pagination_dir: page# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: landscape# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: type: git # repo: https://github.com/zhengqingya/zhengqingya.github.io # github仓库 repo: https://gitee.com/zhengqingya/blog # 码云仓库 branch: master message: # 自定义提交消息3、部署项目到码云访问执行如下命令生成静态文件（public文件夹），并提交到码云或github远程仓库上 ...

原文地址：Create an Hexo Theme - Part 3: Comments, Analytics and Widgets原文作者：Jonathan Klughertz在这个系列教程中，你将学习怎么从零开始制作一个 Hexo 主题。在 part1 和 part2 中，我们已经创建了博客的所有页面。在这篇文章中，我们将给博客添加 Disqus 评论系统，实现 谷歌分析以及完成侧边栏的小部件。 其它文章的链接：创建一个Hexo主题-Part1:首页创建一个Hexo主题-Part2:其他页面创建一个Hexo主题-Part3:评论、分析和小部件Disqus 评论系统我已经写了一篇关于如何在 Hexo 中使用 Disqus 评论系统的文章。请前往查看以了解更多信息，这里我只简单介绍一下怎么使用： 第一步是获取 Disqus UID 来测试评论功能，可以利用你的账号在这里获取：接下来需要完成三个部分：主题文件的 disqus 配置、评论占位区、Disqus 脚本。事不宜迟，我们开始吧。 主题配置我们希望 Disqus UID 是可以配置的，因此给主题的 config.yml 文件添加一个条目： # Disqus Comments Shortnamedisqus_shortname: klugjoTest评论占位区接下来我们给页面和文章详情页添加评论系统。和之前一样，创建一个局部视图文件 layout/_partial/comments.ejs，之后打开 layout/_partial/article-full.ejs 文件，把它插入到末尾。 /* layout/_partial/comments.ejs */<div class="blog-post"> [...] <!-- Comments --> <%- partial('comments') %></div>Disqus 需要 ID 为 disqus_thread 的 div 元素，因此我们这里复制官方文档提供的代码： <div id="disqus_thread"> <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript></div>将上面的代码合并到 comments 文件中： ...

1.下载并安装nodejs下载根据自己电脑操作系统的位数到node官网下载相应的版本： https://nodejs.org/en/download/ 根据自己的需要安装到响应的地方，其他的一路点击next即可 配置环境变量选中桌面图标计算机，右键选择属性，打开左边的高级系统设置，打开弹出窗口的环境变量，找到path进行编辑。 找到node.js的安装目录，将其复制后粘贴到path后面。注意每一个加进来的路径后面都要带英文格式的分号。 测试是否安装成功windows+R输入cmd打开命令提示符窗口，输入如下命令： node -v若安装成功会打印出本机安装的node.js的版本。 2.安装和配置hexohexo是基于node.js的静态博客，官网也是搭建在GitHub上。 安装在你喜欢的路径下新建一个文件夹blog，用来存放博客的文件，在此文件夹中右键打开cmd 输入如下指令进行安装： npm install -g hexo-cli如果执行这条命令时长时间未成功，那么请先使用下面的命令将npm镜像源更改为国内的镜像，再执行上面的安装命令，因为国外的镜像源很有可能被墙了。 npm config set registry https://registry.npm.taobao.org初始化hexohexo init hexo这里会将Github上的hexo项目clone下来，得到hexo文件夹。 初始化成功后会在最后打印一行：INFO Start blogging with Hexo! 安装依赖文件进入到hexo文件夹 cd hexo安装依赖文件： cnpm install编译资源，部署形成静态文件： hexo generate执行后，会生成public的文件夹。也就是打包生成好的静态文件存放。 本地测试 hexo serve在浏览器输入：http://localhost:4000/ 即可访问到我们搭建好的hexo站点。 如果端口被占用 可以使用如下命令启动： hexo s -p 50003.总结通过如上简单几步，就可以在本地搭建一个可访问的个人博客。至于里面的文件结构说明会在下一篇去讲。先让程序跑起来，然后在慢慢去深入了解相关概念。

文/方子龙 一天不码字就剁手的程序猿 1.简介花了几天搭建了个网站，先上链接，欢迎来访：方子龙的个人博客 现在市面上的博客很多，如CSDN，博客园，简书等平台，可以直接在上面发表，用户交互做的好，写的文章百度也能搜索的到。缺点是比较不自由，会受到平台的各种限制和恶心的广告。 而自己购买域名和服务器，搭建博客的成本实在是太高了，不光是说这些购买成本，单单是花力气去自己搭这么一个网站，还要定期的维护它，对于我们大多数人来说，实在是没有这样的精力和时间。 那么就有第三种选择，直接在github page平台上托管我们的博客。这样就可以安心的来写作，又不需要定期维护，而且hexo作为一个快速简洁的博客框架，用它来搭建博客真的非常容易。 我第一次接触Hexo是2018年，我开始是想自己用SpringBoot写一个博客系统，后来在实践的过程中，需要考虑几件事情： 前端页面的实现后端功能的实现数据库的维护服务器的维护考虑购买服务器的费用，还有前端功能的实现，这样的周期就拖得很长，也就没有去实践了。 经过一段时间的收集资料，发现有另外几种方案的实现，Wordpress, Hexo, Jekyll等， 既减少了服务器上的运维，也可以拥有好看的前端效果，而且整个搭建过程也是很简单的。那我们先来看看方案的对比，拓展一下眼界。 2. 方案对比【1】WordPress是什么？引用百度百科 WordPress是使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。WordPress有许多第三方开发的免费模板，安装方式简单易用。WordPress需要会PHP和服务器，所以对于新手来说，还是有门槛的。 【2】Jekyll是什么？ 引用自官网：Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过一个转换器（如 Markdown）和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。Jekyll需要的环境如下： RubyRubyGemsNodeJS或其他 JavaScript 运行环境（如果还没安装NodeJS的，可以参照我写的另一篇文章Mac下安装nvm和NodeJS）Python2.7(或2.7以上版本)看着这些环境，三哥就不想沾染了。 【3】Hexo是什么？ Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。Hexo的主题样式也有很多好看的，而且github都有star上万的。说明还是很受欢迎的。Hexo是基于Nodejs，目前也比较火，基于Nodejs搭建的脚手架，对于前后端还是很友好的。Hexo官方中文文档 3. 总结采用Hexo博客框架，来快速搭建属于自己的博客系统，在托管到Pages上去，可以省去服务器维护的时间和精力。

问题一： 搭建 hexo，在执行 hexo deploy 后,出现 error deployer not found:github 的错误hexo 更新到3.0之后，deploy的type 的github需要改成gitnpm install hexo-deployer-git --save 改了之后执行，然后再部署试试 $ hexo d ERROR Deployer not found: git解决方法npm install --save hexo-deployer-git 问题二：hexo s 网站打不开？原来4000端口被占用，修改端口： hexo s -p 5000 请输入代码hexo官网 https://hexo.io/zh-cn/hexo中文官网 https://hexo.io/zh-cn/docs/BlueLake博客主题的详细配置: https://chaoo.oschina.io/2016/12/29/BlueLake博客主题的详细配置.html

Hexo博客多端同步问题搭完博客，发现只有公司电脑上有源文件，如果回家就没发继续更新博客了。也不能拿着U盘到处拷贝。所以就把博客源文件放到github上解决同步问题。 博客源文件同步在博客根目录执行 git init git remote add origin git@github.com:lanpangzhi/lanpangzhi.github.io.git # 添加远程仓库 注意这里要添加你自己的仓库 lanpangzhi 换成你自己的用户名 git checkout -b hexo # 新建hexo分支并切换到hexo分支 git add . # 所有变化提交到暂存区 git commit -m "解决同步问题" # 提交文件 git push origin hexo # 推送hexo分支这就成功了，github上已经有博客的源文件了。 推荐把hexo设置为默认分支。 git submodule 实现第三方主题同步因为之前是直接把第三方主题克隆到博客目录，有什么改动是无法推送到作者Git仓库的，这个时候需要把第三方主题的项目Fork到自己仓库，自己账号下生成一个同名的仓库，并对应一个url，我们应该git clone自己账号下仓库的url。 执行如下操作。 git submodule add git@github.com:lanpangzhi/hexo-theme-next.git themes/next 把自己仓库下面第三方主题添加到Git子模块， 注 : themes/next 这里的目录是因为我用的next主题才会写themes/next 如果你用的不是next请把next替换成你的第三方主题文件夹名字。 博客的根目录会多一个.gitmodules文件,这是一个配置文件，保存了项目 URL 和你拉取到的本地子目录。 这就添加成功了，然后执行如下操作。 git add . # 所有变化提交到暂存区 git commit -m "添加第三方主题Git子模块" # 提交文件 git push origin hexo # 推送hexo分支更换电脑同步博客和第三方主题同步博客电脑上一定要先node和git，执行如下操作。 ...

集成Algolia搜索起因Swiftype现在收费了，也没有免费版本。Local Search搜索体验不好，微搜索Next官网上描述太少！所以选择Algolia。注：Algolia搜索在版本 5.1.0 中引入，要使用此功能请确保所使用的 NexT 版本在此之后。 首先注册Algolia账户Algolia 登陆页面https://www.algolia.com/users/sign_in，可以使用 GitHub 或者 Google 账户直接登录，也可以注册一个新账户。我直接用谷歌账户登陆了，注册后的 14 天内拥有所有功能（包括收费类别的）。之后若未续费会自动降级为免费账户，免费账户 总共有 10,000 条记录，每月有 100,000 的可以操作数。 注册完成后，创建一个新的 Index，这个 index name 之后会用到Index 创建完成后，此时这个 Index 里未包含任何数据。 接下来需要安装 Hexo Algolia 扩展， 这个扩展的功能是搜集站点的内容并通过 API 发送给 Algolia。前往站点根目录，执行命令安装： npm install hexo-algolia --save # 目前最新版本是1.2.4，下面的操作都是基于这个版本的文档获取 Key，更新站点根目录配置 前往站点根目录打开_config.yml添加以下代码 # Algolia Search API Keyalgolia: applicationID: '你的Application ID' apiKey: '你的Search-Only API Key' indexName: '输入刚才创建index name'修改Algolia搜索ACL（访问控制列表） 选中后保存。 操作完成后执行命令 export(windows 为 set) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY=你的Search-Only API key set (Mac和git bash 为 export) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY #查看是否设置成功如果没有值就设置失败 hexo algolia ...

欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 《Java 核心知识整理&面试.pdf》资源链接！！个人网站: https://www.exception.site/essay/how-to-install-gitalk-on-your-blog 小哈之前有给大家分享如何给自己的个站快速集成聊天室功能，新关注的小伙伴可参考：《黑科技！仅需 3 行代码，就能将 Gitter 集成到个人网站中，实现一个 IM 即时通讯聊天室功能？》 集成完了聊天室，是不是感觉还少了什么？今天给大家分享一下，如何通过 Gitalk 快速集成评论功能。 目录一、什么是 Gitalk二、Gitalk 特性三、为什么要使用 Gitalk四、Gitalk 安装五、为你的个站集成 Gitalk六、你可能会碰到的坑七、最终效果一、什么是 GitalkGitalk 的官方网站地址是: https://gitalk.github.io 小哈截图的时候，Star 数已经达到 2000+ 了，那它到底是个什么玩意呢？来自官方的解释： Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。二、Gitalk 特性使用 GitHub 登录支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]支持个人或组织无干扰模式（设置 distractionFreeMode 为 true 开启）快捷键提交评论 （cmd|ctrl + enter）三、为什么要使用 Gitalk其实国内也有很多易于集成的评论插件，如多说、友言等。国外呢，用的比较多的就是 Dispus 了。这其中小哈使用过的有多说和 Dispus。 先说说 Dispus, 由于服务器架设在国外，访问速度首先是个问题，第二个就是注册了，界面全英文，对一些小白想要快速集成评论功能的，也是相当不友好的；另外，Dispus 仅支持国外一些社交账号登录，如 Fackbook, Google, Twritter 等，我想你的个人博客一定还是国内用户访问多些，选它的话，需要思量一下了。 ...

说在前面本地使用macOS，vps系统为debian 8；虽说是跳坑指南，但是这篇文章本意也仅仅自用，总结一下自己遇到的问题和解决方法，仅供参考，如有其他问题请百度(google) 整体思路：本地调试完的hexo项目文件通过git推送给vps，然后直接部署在vps上使用域名来访问，这样一个属于自己的blog就可以完成了 本地环境GitGit是一个免费的开源分布式版本控制系统，旨在快速，高效地处理从小型到大型项目的所有事务。这原是广泛用在代码的版本控制，在hexo建站里面的主要作用是推送渲染好的静态网页文件到部署的仓库。 下载Git与安装因为本来我就有，所以这里就不多介绍；网上其他大佬也有很多教程 node.js下载Node.js与安装同上，本地环境也有； HexoHexo是一个快速、简洁且高效的静态博客框架。安装简单，虽然网上教程一大堆，建议参考官方文档。重要！官方文档有中文 ????。 官方文档https://hexo.io/zh-cn/ 安装hexo首先确保本地安装好git和node.js，在终端中输入npm install -g hexo-cli 创建hexo项目（建站）hexo init <folder> // 初始化项目文件夹；<folder>为自定义hexo项目名称cd <folder> // 打开项目文件夹npm install // 安装依赖完成上述步骤，查看自己的项目文件夹内，目录应为： .├── node_modules //依赖包├── scaffolds // 模版├── source // 文章资源| ├── _drafts //草稿| └── _posts //发布文章├── themes //主题| └── landscape //默认主题├── package.json // npm配置文件（可以不用管它）└── _config.yml //hexo配置文件配置hexo既然生成了博客了，那自然需要自己来配置一下自己的博客的信息，打开_config.yml文件进行配置；具体配置参考官方文档：https://hexo.io/zh-cn/docs/co... 下载主题主题我挑了很久，最后选择综合症的我只有选了好多人推荐的next主题next官方文档：https://github.com/theme-next... 下载根据文档给的方式使用git clonegit clone https://github.com/theme-next/hexo-theme-next themes/next 试了几次，我一直报错 'RPC failed; curl 18 transfer closed with outstanding read data remaining' ...

一、创建GitHub Pages站点GitHub Pages是一种静态站点托管服务，旨在直接从GitHub仓库托管您的个人，组织或项目页面。每个GitHub帐户和组织都有一个站点。1.新建仓库访问GitHub官网 https://github.com 登陆GitHub账号，新建仓库，名称固定格式为: <username>.github.io其中username是GitHub上的用户名（或组织名称）如果仓库名称的第一部分与您的用户名不完全匹配，则无法正常工作，因此请务必正确使用。2.将仓库代码clone到本地使用SSH或HTTPS方式, 将仓库代码拉取到本地(SSH方式需要配置SSH keys, HTTPS方式需要输入账号密码) 3.本地新建index.html文件4.将本地代码推送到github5. 访问站点在浏览器中访问 http://&lt;username>.github.io, 即可访问到你的网站首页, 内容为你刚才新建的index.html文件二、自定义域名1.项目代码中设置自定义域名(创建CNAME文件)点击当前项目的【Settings】, 在【Custom domain】一栏输入你自定义的二级域名, 然后点【Save】此时会在你的项目根目录下会自动生成一个CNAME文件, 文件内容为你自定义的二级域名。2.域名解析中添加CNAME类型的解析记录登陆到你自己的域名管理后台，新增一条CNAME类型的域名解析记录, 内容如下:记录类型: CNAME主机记录: 自定义的二级域名记录值: <github用户名>.github.io保存后, 稍等几分钟,在浏览器访问你自定义的二级域名即可正常链接到你的github个人网站。三、Hexo搭建网站Hexo官网中文版 https://hexo.io/zh-cnHexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。1.安装Hexo(1) 安装依赖的应用程序：Node.js (最低支持版本6.9,下载地址: https://nodejs.org/en)Git (下载地址:https://git-scm.com/download)(2) 使用 npm 安装全局安装Hexo如果npm安装速度过慢, 可使用淘宝NPM镜像(http://npm.taobao.org) 代替npm$ npm install -g hexo-cli2.Hexo新建项目(1) 新建网站项目, 并安装依赖库在本地电脑上, 指定一个文件夹用于存放hexo项目代码, 执行以下指令:$ hexo init <folder>$ cd <folder>$ npm install新建完成后，指定文件夹的目录如下：.├── _config.yml├── package.json├── scaffolds├── source| ├── _drafts| └── _posts└── themes(2) 本地预览首先在当前项目下, 安装 hexo-server 模块npm install hexo-server –save安装完成后，输入以下命令以启动服务器，您的网站会在 http://localhost:4000 下启动。在服务器启动期间，Hexo 会监视文件变动并自动更新，您无须重启服务器。hexo server浏览器访问 http://localhost:4000, 即可访问网站首页。3.Hexo配置与部署(1) 修改配置文件_config.yml安装 hexo-deployer-git依赖库npm install hexo-deployer-git –save修改配置(改为你自己的GitHub项目地址, 并且确保GitHub已配置了你当前机器的SSH密钥)deploy: type: git repo: <repository url> #git@github.com:sufaith/sufaith.github.io.git branch: [branch] #master message: [message]repo: 库（Repository）地址branch: 分支名称。message: 自定义提交信息 (默认为 Site updated: {{ now(‘YYYY-MM-DD HH:mm:ss’) }})将url 修改为 您的站点网址 http://yoursite.com/(2) source目录下，创建CNAME文件CNAME文件的内容为你自定义的二级域名(3) 生成静态文件hexo generate#简写为:hexo g执行 hexo generate g命令后, 会在项目根目录下自动生成 public 文件夹, 该文件夹即是我们网站所需的静态文件。(4) 一键部署静态文件至github#先清除站点文件，然后重新生成站点文件并将之推送到指定的库分支hexo clean && hexo deploy#简写为:hexo clean && hexo d执行命令后, 成功将生成的静态文件推送到GitHub。(5) 访问网站在浏览器输入你自定义的二级域名, 即可正常访问到你用GitHub+Hexo搭建的网站。 ...

从零开始搭建博客第一部分，Github注册及Github Pages建立什么是 Hexo？Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。<!–more–>一：注册Github1：打开Github首页，点击Sign up 进行注册。二：Github Pages 静态网页建立1：在新页面点击 NEW 按钮，创建属于自己的新仓库。2: 点击 Code3: 点击 Create new file4: 输入 index.html，在 Edit new file 书写内容。5：点击 Commit new file 进行创建。6：用浏览器打开 用户名.github.ioGithub Pages 静态网页建立完成。三：Hexo博客本地环境安装1: 安装 Node2: 安装 Git4: 初始化 Hexo电脑中任选盘符新建一个文件夹作为博客网站的根目录，文件名好不要是中文。空白处右键点击 Git Bash Here安装 Hexo$ npm install -g hexo-cli等待运行完成后依次输入以下命令$ hexo init <新建文件夹的名称>$ cd <新建文件夹的名称>$ npm install注意:后续的命令均需要在站点目录下（即文件夹内）使用Git Bash运行。此时Hexo框架的本地搭建已经完成了。我们来运行一下看看：命令行依次输入以下命令:$ hexo clean #清除浏览器缓存$ hexo g$ hexo s浏览器中打开(http://locakhost:4000)或者(127.0.0.1:4000),说明Hexo博客已经成功在本地运行。四：本地博客发布到Github Pages1：需要在Github上创建好Github Pages仓库2：安装将 Hexo 部署到 Git 的插件在站点目录中运行命令行输入 npm install hexo-deployer-git –save后续还要安装各种插件，实现博客的各种功能。等待插件安装完成3：将本地目录与Github关联起来命令行输入$ ssh-keygen -t rsa -C “邮箱地址"1： 这里要输入之前注册Github时的邮箱，例如我之前注册用的是 123@qq.com，那命令行就输入ssh-keygen -t rsa -C “123@qq.com"输入后一直回车。2：打开 C:Users 用户名，文件夹内寻找 .ssh 文件夹3：文件夹内会有两个文件，一个id_rsa.pub一个id_rsa，用文本方式打开id_rsa.pub，推荐使用Vscode 打开，复制里面的的内容。4：打开Github 点击右上角的头像 Settings 选择SSH and GPG keys5：点击 New SSH key 将之前复制的内容粘帖到Key的框中。 上面的title 可以随意 点击 Add SSH key 完成添加。6: 此时回到命令行。 试一下是否跟Github连接成功。命令行输入ssh -T git@github.com ，弹出的内容输入yes，看到出现Hi <account name>! You’ve successfully authenticated, but GitHub doesnot provide shell access. 说明链接成功。此处这个<account name>应该是你Github的用户名。4: 修改Hexo站点的 _config.yml文件进入博客文件夹， 找到 config.yml 博客的配置文件。以后修改博客的样式或内容会多次用到它。# Hexo Configuration## Docs: https://hexo.io/docs/configuration.html## Source: https://github.com/hexojs/hexo/# Sitetitle: #网站标题subtitle: #网站副标题description: #网站描述 主要用于SEOkeywords: #网站关键词 主要用于SEOauthor: #网站作者language: zh-CN #网站语言timezone: #网站时区：Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。# URL 网址## If your site is put in a subdirectory, set url as ‘http://yoursite.com/child' and root as ‘/child/‘url: #修改为https://<用户名>.github.ioroot: / #如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。permalink: :year/:month/:day/:title/ #文章的永久链接格式permalink_defaults: #永久链接中各部分的默认值在文件底部 deploy 添加如下代码：# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: #部署部分的设置type: gitrepo: git@github.com:<Github用户名>/<github用户名>.github.io.gitbranch: master5: 保存配置，将生成的本地页面上传至Github命令行输入hexo g，此时Hexo会根据配置文件渲染出一套静态页面。完成后输入hexo d，此时会将之前渲染出的一系列文件上传至Github。注意：也可以直接输入hexo g -d直接完成渲染和上传。上传完成后，打开https://&lt;用户名>.github.io查看上传的网页。如果页面变成了之前本地调试时的样子，说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息，没有的话清除一下浏览器缓存试试。五：Hexo博客主题安装及Next主题个性化修改基于Next主题的修改和配置注意：博客配置文件是指博客根目录下的_config.yml文件，主题配置文件是指/themes/主题名/路径下的_config.yml文件，例如我使用的主题为next主题，主题配置文件为/themes/next/config.yml。1：主题选择到 Nexo官网主题页选择喜欢的主题。每个主题配置方法略有不同，建议使用流行主题，推荐Next主题，因为我的博客就是用Next主题搭建的。2：主题修改主题安装Next主题文档页面Nest主题Github页面博客根目录打开命令行输入 git clone https://github.com/theme-next/hexo-theme-next themes/next1：安装完成后，打开 博客配置文件 修改theme 主题：# Extensions 扩展## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next #当前主题名称。值为false时禁用主题2：修改 主题配置文件 是根目录/themes/next目录下的_config.yml文件。修改菜单及创建分类页1:定位到 Hexo 站点目录下,在命令行输入如下命令： $ hexo new page tags新建出标签页同样的道理，开启分类页的时候要输入hexo new page categories来新建出分类页。2:设置页面类型：编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：—title: 标签date: 2014-12-22 12:39:04type: “tags”—3:修改 主题配置 文件下的menu项：menu: home: / || home #about: /about/ || user tags: /tags/ || tags categories: /categories/ || th archives: /archives/ || archive #schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap #commonweal: /404/ || heartbeat修改主题风格Next自带四种主题风格，可以在主题配置文件搜索Scheme项，将需要的风格前的#去掉，注意只能开启一个风格。# Scheme Settings# —————————————————————# Schemes# scheme: Muse#scheme: Mist#scheme: Piscesscheme: Gemini设置作者头像编辑主题配置文件，搜索修改字段 avatar， 值设置成头像的链接地址。可以设置成在线的图片地址。也可以把图片放在本地。本地设置：放置在source/images目录下，设置为url: /images/avatar.jpg# Sidebar Avataravatar: # in theme directory(source/images): /images/avatar.gif # in site directory(source/uploads): /uploads/avatar.gif # You can also use other linking images. url: /images/cat.jpg # If true, the avatar would be dispalyed in circle. rounded: false # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar. opacity: 1 # If true, the avatar would be rotated with the cursor. rotated: true设置作者昵称与站点描述# Site 网站title: #网站标题subtitle: #网站副标题description: #网站描述 主要用于SEOkeywords: #网站关键词 主要用于SEOauthor: #网站作者language: zh-CN #网站语言timezone: #网站时区：Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。设置代码高亮主题NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties：编辑主题配置文件，更改 highlight_theme 字段，将其值设定成你所喜爱的高亮主题，例如：# Code Highlight theme# Available values: normal | night | night eighties | night blue | night bright# https://github.com/chriskempson/tomorrow-themehighlight_theme: night eighties侧边栏社交链接侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。 两者配置均在 主题配置文件 中。# Social Links.# Usage: Key: permalink || icon# Key is the link label showing to end users.# Value before || delimeter is the target permalink.# Value after || delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.social: GitHub: https://github.com/yourname || github E-Mail: mailto:yourname@qq.com || envelope #Weibo: https://weibo.com/yourname || weibo #Google: https://plus.google.com/yourname || google #Twitter: https://twitter.com/yourname || twitter #FB Page: https://www.facebook.com/yourname || facebook #VK Group: https://vk.com/yourname || vk #StackOverflow: https://stackoverflow.com/yourname || stack-overflow #YouTube: https://youtube.com/yourname || youtube #Instagram: https://instagram.com/yourname || instagram #Skype: skype:yourname?call|chat || skype设定链接的图标，对应的字段是 social_icons。其键值格式是 匹配键: Font Awesome 图标名称， 匹配键 与上一步所配置的链接的 显示文本 相同（大小写严格匹配），图标名称 是 Font Awesome 图标的名字（不必带 fa- 前缀）。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。social_icons: enable: true icons_only: false transition: false开启打赏功能越来越多的平台（微信公众平台，新浪微博，简书，百度打赏等）支持打赏功能，付费阅读时代越来越近，特此增加了打赏功能，支持微信打赏和支付宝打赏。 只需要 主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。# Reward# If true, reward would be displayed in every article by default.# And you can show or hide one article specially through add page variable reward: true/false.reward: enable: true comment: 如果觉得文本对您有帮助，欢迎打赏 wechatpay: /images/wechat.png alipay: /images/zhifubao.jpg bitcoin: /images/qq.png注意：将保存的图片放到 /source/images/图片名称修改打赏字体不闪动鼠标一指就疯狂抖动。修改文件next/source/css/_common/components/post/post-reward.styl，然后注释其中的函数#QR > div:hover p函数即可。css文件注释用/ 和 / 包裹代码即可。#QR > div:hover p { animation: roll 0.1s infinite linear; -webkit-animation: roll 0.1s infinite linear; -moz-animation: roll 0.1s infinite linear;}这个post-reward.styl文件是跟按钮及图片相关的，如果需要修改关于打赏的其他属性，例如按钮大小，样式，图片大小等，都可以修改post-reward.styl文件实现。开启友情链接 or 侧边栏推荐阅读主题配置文件 中搜索links_title字段，修改links_icon、links_title、links_layout、links四个字段的内容实现自定义风格。link_icon是title前面的图标，用法跟之前的社交链接的图标用法是一样的， 用Font Awesome图标。links_title为标题，如果是作为友情链接使用，可以设置为links_title: 友情链接在links字段设置友情链接名字及链接这个模块的自由度比较高，可以用来放置友情链接，也可以放置推荐阅读。# Blog rollslinks_icon: linklinks_title: Linkslinks_layout: block#links_layout: inline#links: #Title: http://example.comhexo生成博文插入图片显示不出来把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true在hexo的目录下执行npm install https://github.com/CodeFalling/hexo-asset-image –save（需要等待一段时间）。完成安装后用hexo新建文章 hexo new “文章标题” 的时候会发现_posts目录下面会多出一个和文章名字一样的文件夹。只要使用 就可以插入图片。其中[]里面不写文字则没有图片标题。文章左侧的目录如何弄出来？1、首先在你的markdown文件里面要有标题，所谓标题就是例如这种一级标题(#)，二级标题(##)，三级标题(###)的。2、在主题的_config文件里面，将toc的enable设置为true就ok了，默认的目录是有序号的，如果你不想要序号，你需要把number置为false 。设置 RSSNexT 中 RSS 有三个设置选项，满足特定的使用场景。 更改 主题配置 文件，设定 rss 字段的值：false：禁用 RSS，不在页面上显示 RSS 连接。留空：使用 Hexo 生成的 Feed 链接。 你可以需要先安装 hexo-generator-feed 插件。安装方法：根目录下命令行输入npm install hexo-generator-feed –save具体的链接地址：适用于已经烧制过Feed的情形。建议直接使用插件，比较省事。设置网站图标在EasyIcon中分别找一张（16 16与32 32）的ico图标,或者去别的网站下载或者制作，并将图标名称改为favicon16.ico与favicon32.ico。把图标放在/themes/next/source/images或者放在根目录的/source/images文件夹里。在 主题配置文件 内搜索favicon字段，把 small、medium字段的地址修改为/images/favicon16.ico 与 /images/favicon32.ico。实现全站及文章字数统计及阅读时长根目录命令运行：npm install hexo-symbols-count-time –save博客配置文件底部添加如下内容，保存。# 1，实现全站及文章数字统计及阅读时长# 运行 npm install hexo-symbols-count-time –savesymbols_count_time: symbols: true time: true total_symbols: true total_time: true添加顶部加载条根目录打开命令行，输入如下命令：git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace然后主题配置文件搜索pace字段，修改pace: false为pace: true即可开启加载条功能，修改下方的pace-theme字段还可以修改加载条的样式。# Progress bar in the top during page loading.# Dependencies: https://github.com/theme-next/theme-next-pacepace: true# Themes list:#pace-theme-big-counter#pace-theme-bounce#pace-theme-barber-shop#pace-theme-center-atom#pace-theme-center-circle#pace-theme-center-radar#pace-theme-center-simple#pace-theme-corner-indicator#pace-theme-fill-left#pace-theme-flash#pace-theme-loading-bar#pace-theme-mac-osx#pace-theme-minimal# For examplepace_theme: pace-theme-center-simple# pace_theme: pace-theme-minimal自定义鼠标样式打开themes/next/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 }在EasyIcon中找一张16 * 16的ico图，放在/source/images/中，修改上述代码中的链接为/images/xxx.ico，如果不放在本地的话，可以把图片放在图床，直接替换链接即可。第一行的链接是默认状态下的鼠标样式，第二行的是鼠标按下时的样式。// 鼠标样式 * { cursor: url("/images/cat.ico”),auto!important } :active { cursor: url(”"/images/cat2.ico””),auto!important }实现点击出现桃心 以及 爆炸效果在/themes/next/source/js/src下新建文件love.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())+","+(255Math.random())+","+~~(255Math.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);或建一个叫fireworks.js的文件并写入如下代码：“use strict”;function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]a;return{x:e.x+nMath.cos(t),y:e.y+nMath.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:“easeOutExpo”,update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:“linear”,duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:“easeOutExpo”,update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext(“2d”),numberOfParticules=30,pointerX=0,pointerY=0,tap=“mousedown”,colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2window.innerWidth,canvasEl.height=2window.innerHeight,canvasEl.style.width=window.innerWidth+“px”,canvasEl.style.height=window.innerHeight+“px”,canvasEl.getContext(“2d”).scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){“sidebar”!==e.target.id&&“toggle-sidebar”!==e.target.id&&“A”!==e.target.nodeName&&“IMG”!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener(“resize”,setCanvasSize,!1)}“use strict”;function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]a;return{x:e.x+nMath.cos(t),y:e.y+nMath.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:“easeOutExpo”,update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:“linear”,duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:“easeOutExpo”,update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext(“2d”),numberOfParticules=30,pointerX=0,pointerY=0,tap=“mousedown”,colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2window.innerWidth,canvasEl.height=2window.innerHeight,canvasEl.style.width=window.innerWidth+“px”,canvasEl.style.height=window.innerHeight+“px”,canvasEl.getContext(“2d”).scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){“sidebar”!==e.target.id&&“toggle-sidebar”!==e.target.id&&“A”!==e.target.nodeName&&“IMG”!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener(“resize”,setCanvasSize,!1)};打开themes/next/layout/_layout.swig,在</body>上面写下如下代码：{% if theme.fireworks && not theme.love %} <canvas class=“fireworks” style=“position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;” ></canvas> <script type=“text/javascript” src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> <script type=“text/javascript” src="/js/src/fireworks.js"></script>{% endif %}{% if theme.love && not theme.fireworks %} <script type=“text/javascript” src="/js/src/love.js"></script>{% endif %}在 主题配置文件 最下方加入如下代码：# Fireworks and lovefireworks: truelove: false注意：fireworks是爆炸效果，love是心形效果。两个不能同时开。修改网页底部的小图标在 主题配置文件 搜索footer字段，修改下方的icon字段下的name字段。name字段后的名字是 Font Awesome 图标的名字（不必带 fa- 前缀）。footer: # Specify the date when the site was setup. # If not defined, current year will be used. #since: 2015 # Icon between year and copyright info. icon: # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons # heart is recommended with animation in red (#ff0000). name: user # If you want to animate the icon, set it to true. animated: true #animated自动为闪动开关，设置为true后图标会闪动。 # Change the color of icon, using Hex Code. color: “#808080"去掉页面底部的强力驱动信息及设置备案信息主题配置文件搜索copyright字段，修改powered下的enable字段的true为false即可去掉强力驱动部分的内容# If not defined, will be used author from Hexo main config. copyright: # ————————————————————- powered: # Hexo link (Powered by Hexo). enable: true # Version info of Hexo after Hexo link (vX.X.X). version: true theme: # Theme & scheme info link (Theme - NexT.scheme). enable: true # Version info of NexT after scheme info (vX.X.X). version: true # ————————————————————- # Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer. # http://www.miitbeian.gov.cn beian: #如果博客有备案的话，下方beian字段设置为true，icp后填写备案号。 enable: false icp:添加动态背景注意：尽量不要添加，耗费资源较大，加载速度非常慢1.根目录打开命令行，输入：$ git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest2.主题配置文件搜索canvas-nest字段，enable项设置为true。# Canvas-nest# Dependencies: https://github.com/theme-next/theme-next-canvas-nestcanvas_nest: enable: false onmobile: true # display on mobile or not color: ‘0,0,255’ # RGB values, use ‘,’ to separate opacity: 0.5 # the opacity of line: 01 zIndex: -1 # z-index property of the background count: 99 # the number of lines3.其他配置项说明：color ：线条颜色, 默认: ‘0,0,0’；三个数字分别为(R,G,B)opacity: 线条透明度（01）, 默认: 0.5count: 线条的总数量, 默认: 150zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1onmobile：是否在手机端显示。增加波浪背景动画根目录打开命令行，输入:git clone https://github.com/theme-next/theme-next-three themes/next/source/lib/three主题配置文件搜索three_waves字段，设置为true# Internal version: 1.0.0 # See: https://github.com/theme-next/theme-next-three # Example: # three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/three.min.js # three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/three-waves.min.js # canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/canvas_lines.min.js # canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/canvas_sphere.min.js three: three_waves: canvas_lines: canvas_sphere:three_waves、canvas_lines、canvas_sphere三个的效果各不相同，可以自己尝试一下选一个喜欢的。添加静态背景打开博客根目录/themes/next/source/css/_custom/custom.styl文件，编辑如下：// Custom styles.body { background-image: url(/images/background.png); //动图也可以添加 background-attachment: fixed; // 不随屏幕滚动而滚动 background-repeat: repeat; // 如果背景图不够屏幕大小则重复铺，改为no-repeat则表示不重复铺 background-size: contain; // 等比例铺满屏幕博客主页自定义样式修改打开博客根目录/themes/next/source/css/_custom/custom.styl文件:用 css 语言修改自己想要的主页样式就可以在右上角实现fork me on github按钮最新的Next主题已经内置了增加右上角的Fork me on github按钮功能，只需要在主题配置文件搜索github_banner字段，去掉前面的#，把||前面的github链接替换成自己的即可。# Follow me on GitHub banner in right-top corner.# Usage: permalink || title# Value before || delimeter is the target permalink.# Value after || delimeter is the title and aria-label name.github_banner: https://github.com/wudiufo || Follow me on GitHub||后的参数为按钮的title，为鼠标指在按钮上时显示的文本。增加回到顶部按钮及显示当前浏览进度主题配置文件搜索b2t字段，将b2t字段的false修改为true即可，（注意此功能只能用于Pisces和Gemini主题）。# Back to top in sidebar (only for Pisces | Gemini). b2t: true # Scroll percent label in b2t button. # scrollpercent字段设置为true即可实现当前浏览进度的显示。 scrollpercent: true # Enable sidebar on narrow view (only for Muse | Mist). onmobile: true修改顶部菜单与下方信息栏的间隙大小主题配置文件搜索offset字段，将offset的像素数大小设置为需要的值，默认为12。# Sidebar offset from top menubar in pixels (only for Pisces | Gemini). offset: 12网站标题栏背景颜色打开 themes/next/source/css/_custom/custom.styl ,在里面写下如下代码：// 网站标题栏背景颜色.site-meta { background: #FF0033; //修改为自己喜欢的颜色}为博客加上萌萌的动图首先安装插件，根目录命令行输入：$ npm install –save hexo-helper-live2d主题配置文件最下方添加如下代码:# Live2D## https://github.com/xiazeyu/live2d-widget.js## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-initlive2d: model: scale: 1 hHeadPos: 0.5 vHeadPos: 0.618 display: superSample: 2 width: 150 height: 300 position: right hOffset: 0 vOffset: -20 mobile: show: true scale: 0.5 react: opacityDefault: 0.7 opacityOnHover: 0.2更多设置可以查看官方文档添加DaoVoice 实现在线联系本功能可以实现在线留言，作者会收到邮件，如果绑定了微信，作者还会收到微信通知。首先到DaoVoice注册一个Daovioce账号。注册完成后会进到DaoCloud，重新访问连接即可。进到Daovoice面板，点击左侧边栏的应用设置– 安装到网站。在下方的代码中会看到app_id: “xxxx"字样。打开 themes/next/layout/_partials/head/head.swig 文件中最下方加入如下代码：{% if theme.daovoice %} <script> (function(i,s,o,g,r,a,m){i[“DaoVoiceObject”]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset=“utf-8”;m.parentNode.insertBefore(a,m)})(window,document,“script”,(‘https:’ == document.location.protocol ? ‘https:’ : ‘http:’) + “//widget.daovoice.io/widget/0f81ff2f.js”,“daovoice”) daovoice(‘init’, { app_id: “{{theme.daovoice_app_id}}” }); daovoice(‘update’); </script>{% endif %}在主题配置文件 _config.yml，添加如下代码：# DaoVoice daovoice: truedaovoice_app_id: 这里输入前面获取的app_id回到Daovoice控制面板，点击聊天设置可以对聊天图标的颜色及位置进行设置。最后到右上角选择管理员，微信绑定，可以绑定你的微信号。这样收到消息后可以通过小程序进行回复。主页文章添加阴影效果打开themesnextsourcecss_customcustom.styl,加入如下代码：// 主页文章添加阴影效果 .post { margin-top: 60px; 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); }可以自行修改代码来修改阴影效果增加本地搜索功能首先安装插件，根目录命令行输入:$ npm install hexo-generator-searchdb –save编辑博客配置文件，新增以下内容到任意位置：search: path: search.xml field: post format: html limit: 10000主题配置文件搜索local_search字段，设置enable为true# Local searchlocal_search: enable: true添加图片懒加载博客根目录打开命令输入$ git clone https://github.com/theme-next/theme-next-jquery-lazyload themes/next/source/lib/jquery_lazyload然后在配置文件中搜索 lazyload,将其修改为true# Added switch option for separated repo in 6.0.0.# Dependencies: https://github.com/theme-next/theme-next-jquery-lazyloadlazyload: true 添加评论添加方法在来必力的官网上注册账号。在此处获取data-uid。打开NexT主题的配置文件—config中，搜索livere_uid，将livere_uid前面的#号去掉，将id填写到livere_uid：后面。# Support for LiveRe comments system.# You can get your uid from https://livere.com/insight/myCode (General web site)#livere_uid: your uid代码块复制功能前言为了提高博客代码块的用户体验，仅仅代码高亮还不行，最好还能一键复制代码。故此文将讲述Hexo Next主题博客的代码块复制功能配置。下载需要下载 clipboard.js主页Github提供下载:（推荐用这个）clipboard.min.js将下载的文件存到如下目录：（相对目录为工程目录，没有目录则创建）.themesnextsourcelibzclipclipboard.min.js导入新建文件 custom.js ，目录如下：（相对目录为工程目录）themesnextsourcejssrccustom.js修改 custom.js 为如下内容：//此函数用于创建复制按钮function createCopyBtns() { var $codeArea = $(“figure table”); //查看页面是否具有代码区域，没有代码块则不创建 复制按钮 if ($codeArea.length > 0) { //复制成功后将要干的事情 function changeToSuccess(item) { $imgOK = $("#copyBtn”).find("#imgSuccess”); if ($imgOK.css(“display”) == “none”) { $imgOK.css({ opacity: 0, display: “block” }); $imgOK.animate({ opacity: 1 }, 1000); setTimeout(function() { $imgOK.animate({ opacity: 0 }, 2000); }, 2000); setTimeout(function() { $imgOK.css(“display”, “none”); }, 4000); }; }; //创建 全局复制按钮，仅有一组。包含：复制按钮，复制成功响应按钮 //值得注意的是：1.按钮默认隐藏，2.位置使用绝对位置 position: absolute; (position: fixed 也可以，需要修改代码) $(".post-body").before(’<div id=“copyBtn” style=“opacity: 0; position: absolute;top:0px;display: none;line-height: 1; font-size:1.5em”><span id=“imgCopy” ><i class=“fa fa-paste fa-fw”></i></span><span id=“imgSuccess” style=“display: none;"><i class=“fa fa-check-circle fa-fw” aria-hidden=“true”></i></span>’); //创建 复制 插件，绑定单机时间到 指定元素，支持JQuery var clipboard = new Clipboard(’#copyBtn’, { target: function() { //返回需要复制的元素内容 return document.querySelector("[copyFlag]”); }, isSupported: function() { //支持复制内容 return document.querySelector("[copyFlag]"); } }); //复制成功事件绑定 clipboard.on(‘success’, function(e) { //清除内容被选择状态 e.clearSelection(); changeToSuccess(e); }); //复制失败绑定事件 clipboard.on(’error’, function(e) { console.error(‘Action:’, e.action); console.error(‘Trigger:’, e.trigger); }); //鼠标 在复制按钮上滑动和离开后渐变显示/隐藏效果 $("#copyBtn").hover( function() { $(this).stop(); $(this).css(“opacity”, 1); }, function() { $(this).animate({ opacity: 0 }, 2000); } ); }}//感应鼠标是否在代码区$(“figure”).hover( function() { //——-鼠标活动在代码块内 //移除之前含有复制标志代码块的 copyFlag $("[copyFlag]").removeAttr(“copyFlag”); //在新的（当前鼠标所在代码区）代码块插入标志：copyFlag $(this).find(".code").attr(“copyFlag”, 1); //获取复制按钮 $copyBtn = $("#copyBtn"); if ($copyBtn.lenght != 0) { //获取到按钮的前提下进行一下操作 //停止按钮动画效果 //设置为 显示状态 //修改 复制按钮 位置到 当前代码块开始部位 //设置代码块 左侧位置 $copyBtn.stop(); $copyBtn.css(“opacity”, 0.8); $copyBtn.css(“display”, “block”); $copyBtn.css(“top”, parseInt($copyBtn.css(“top”)) + $(this).offset().top - $copyBtn.offset().top + 3); $copyBtn.css(“left”, -$copyBtn.width() - 3); } }, function() { //——-鼠标离开代码块 //设置复制按钮可见度 2秒内到 0 $("#copyBtn").animate({ opacity: 0 }, 2000); });//页面载入完成后，创建复制按钮$(document).ready(function() { createCopyBtns();});配置新建文件 custom.swig ，目录：.themesnextlayout_customcustom.swig（相对目录为工程目录）<script type=“text/javascript” src="/lib/zclip/clipboard.min.js"></script> <script type=“text/javascript” src="/js/src/custom.js"></script>修改文件 _layout.swig ，目录：\themes\next\layout_layout.swig（相对目录为工程目录）添加如下代码：<!doctype html> {% include ‘_third-party/math/mathjax.swig’ %} {% include ‘_custom/custom.swig’ %}</body></html>向文件中 </body> 前一行插入文件引用，如第 15 行效果。{% include ‘_custom/custom.swig’ %}在主题配置文件_config.yml中找到以下代码：将enable修改为true，show_result修改为truecodeblock: # Manual define the border radius in codeblock # Leave it empty for the default 1 border_radius: # Add copy button on codeblock copy_button: enable: true # Show text copy result show_result: true六：Hexo撰写文章一、创建文章在站点文件夹中打开git bash，输入如下命令创建文章，其中title为文章的标题：hexo new “title"此时就会在source/_post文件夹中创建了一个文件，命名为：title.md，而这个文件就是将要发布到网站上的原始文件，记录文章内容，以下我们将要在这个文件中写下我们的第一篇博客二、编写文章（基于Markdown）推荐大家一款简洁易用的markdown编辑器 Typora,点击下载。Markdown语法及在线编辑1.模板设置当我们使用命令 hexo new “title” 去创建我们的文章时，Hexo会根据/scaffolds/post.md文件对新建文件进行初始化，换言之，/scaffolds/post.md文件就是创建新文章的模板，所以我们可以修改它来适应自己的写作习惯，一个简单的示例如下：—title: {{ title }}date: {{ date }}tags: categories: —2.头部设置在博客文章的开头会有对文章的说明文字，叫做文章头部，文章的头部除了可以设置文章标题、书写日期等基础信息外，还可以对文章添加标签、分类等，一个简单的示例如下:—title: Title #标题date: YYYY-MM-DD HH:MM:SS #文件建立日期tags: #标签（不适用于分页）- 标签1- 标签2categories: #分类（不适用于分页）- 分类1- 分类2layout: #布局updated: YYYY-MM-DD HH:MM:SS #文件更新日期comments：true #开启文章的评论功能permalink：覆盖文章网址—注意，属性和属性值之间必须有一个空格，否则会解析错误3.首页显示1.在Hexo框架博客的首页会显示文章的内容（默认显示文章的全部内容），如果当文章太长的时候就会显得十分冗余，所以我们有必要对其进行精简，只需在文章中使用 <!–more–> 标志，表示只会显示标志前面的内容2.推荐使用：在主题配置文件中找到auto_excerpt，将enable变为true，代码如下：# Automatically Excerpt. Not recommend.# Please use <!– more –> in the post to control excerpt accurately.auto_excerpt: enable: true length: 150 #长度可自由调节三，顶部统计每篇文章阅读次数在主题配置文件中查找busuanzi_count,将其按照如下方式修改：# Show Views/Visitors of the website/page with busuanzi.# Get more information on http://ibruce.info/2015/04/04/busuanzibusuanzi_count: enable: true total_visitors: true total_visitors_icon: user total_views: true total_views_icon: eye post_views: true post_views_icon: eye七，生成sitemap站点地图百度+谷歌都无法搜索到我的博客 不能忍1.先确认博客是否被收录在百度或者谷歌上面输入下面格式来判断，如果能搜索到就说明被收录，否则就没有。site:写你要搜索的域名 # site:wudiufo.github.io2.创建站点地图文件站点地图是一种文件，您可以通过该文件列出您网站上的网页，从而将您网站内容的组织架构告知Google和其他搜索引擎。搜索引擎网页抓取工具会读取此文件，以便更加智能地抓取您的网站。先安装一下，打开你的hexo博客根目录，分别用下面两个命令来安装针对谷歌和百度的插件:npm install hexo-generator-sitemap –savenpm install hexo-generator-baidu-sitemap –save在博客根目录的_config.yml中添加如下代码:baidusitemap: path: baidusitemap.xmlsitemap: path: sitemap.xml执行以下命令，编译你的博客$ hexo g在你的博客根目录的public下面发现生成了sitemap.xml以及baidusitemap.xml就表示成功了执行 hexo s 看站点地图是否生成3.让百度,360和谷歌收录我们的博客验证网站在百度和360，谷歌上分别搜索：site:写你要搜索的域名 # site:wudiufo.github.io其中的域名换成你的博客域名，如果此前没有进行过操作，应该是搜不到的，并且搜索出来的结果含有搜索引擎提交入口分别进入搜索引擎提交入口，添加域名，选择验证网站，有3种验证方式，本文推荐采用HTML标签验证这里演示百度站长平台打开Hexo主题配置文件，添加以下两行:google_site_verification: #索引擎提供给你的HTML标签的content后的字符串baidu_site_verification: #索引擎提供给你的HTML标签content后的字符串还有其他搜索引擎，自行添加然后运行：hexo clean && hexo generatehexo deploy然后点击验证，就可以通过验证了4，百度自动推送将主题配置文件中的baidu_push设置为true，然后将/next/layout/_scripts文件夹下面的baidu-push.swig文件中的 &lt;script type="text/javascript" async src="//push.zhanzhang.baidu.com/push.js"&gt;&lt;/script&gt; 替换为百度提供的自动推送代码,如下：<script>(function(){ var bp = document.createElement(‘script’); var curProtocol = window.location.protocol.split(’:’)[0]; if (curProtocol === ‘https’) { bp.src = ‘https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = ‘http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName(“script”)[0]; s.parentNode.insertBefore(bp, s);})();</script>5.谷歌收录我们的博客谷歌操作比较简单，就是向Google站长工具提交sitemap登录Google账号，添加了站点验证通过后，选择站点，之后在抓取——站点地图——添加/测试站点地图 ...

集成Algolia搜索起因Swiftype现在收费了，也没有免费版本。Local Search搜索体验不好，微搜索Next官网上描述太少！所以选择Algolia。注：Algolia搜索在版本 5.1.0 中引入，要使用此功能请确保所使用的 NexT 版本在此之后<!– more –>首先注册Algolia账户Algolia 登陆页面https://www.algolia.com/users/sign_in，可以使用 GitHub 或者 Google 账户直接登录，也可以注册一个新账户。我直接用谷歌账户登陆了，注册后的 14 天内拥有所有功能（包括收费类别的）。之后若未续费会自动降级为免费账户，免费账户 总共有 10,000 条记录，每月有 100,000 的可以操作数。注册完成后，创建一个新的 Index，这个 index name 之后会用到Index 创建完成后，此时这个 Index 里未包含任何数据。 接下来需要安装 Hexo Algolia 扩展， 这个扩展的功能是搜集站点的内容并通过 API 发送给 Algolia。前往站点根目录，执行命令安装：npm install hexo-algolia –save # 目前最新版本是1.2.4，下面的操作都是基于这个版本的文档获取 Key，更新站点根目录配置前往站点根目录打开_config.yml添加以下代码# Algolia Search API Keyalgolia: applicationID: ‘你的Application ID’ apiKey: ‘你的Search-Only API Key’ indexName: ‘输入刚才创建index name’修改Algolia搜索ACL（访问控制列表）选中后保存。操作完成后执行命令 export(windows 为 set) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY=你的Search-Only API key set (Mac和git bash 为 export) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY #查看是否设置成功如果没有值就设置失败 hexo algolia成功后修改Next主题配置文件更改Next主题配置文件，找到 Algolia Search 配置部分：# Algolia Searchalgolia_search: enable: true hits: per_page: 10 labels: input_placeholder: Search for Posts hits_empty: “我们没有找到任何搜索结果: ${query}” hits_stats: “找到约${hits}条结果（用时${time}ms）“将 enable 改为 true 即可，根据需要你可以调整 labels 中的文本。这个是我修改的文本。总结一下集成遇到的BUGPlease provide an Algolia index name in your hexo _config.yml flle原因：Algolia Search API Key indexName 错了解决方案：看下之前新建index的名字Not enough rights to update an object near原因：没有修改Algolia搜索ACL（访问控制列表）解决方案： 按1.4操作勾选上就可以移动端遮罩盖住搜索原因：遮罩的z-index值太高，我的next主题是5.1.3版本可能其他版本没有这个BUG解决方案： 找到themesnextsourcecss_commoncomponentsthird-party 下面的algolia-search.styl 文件 第8行追加 +mobile() z-index: 1000我的博客和github地址http://blog.langpz.comhttps://github.com/lanpangzhi参考http://theme-next.iissnan.com/third-party-services.html#algolia-searchhttps://github.com/oncletom/hexo-algolia ...

趁着周末，自己写了款hexo的主题，主题地址如下：https://github.com/2fps/hexo-…。演示地址：https://www.zhuyuntao.com/截图目前已经实现的功能：文章的展示。右侧栏，分类、标签、归档和最新文章的功能。可以配置keywords 和 description。可以配置百度统计。修改记录查看：https://www.zhuyuntao.com/201…其他功能增加中…

前言：本系列文章翻译自@Jonathan Klughertz的博客，将会用三篇文章的篇幅详细讲解如何制作一个Hexo主题。我不是学翻译出身，若有翻译错误或是不到位之处，请指正。在这个系列教程中，你将学习怎么从零开始制作一个Hexo主题。我很喜欢Hexo，并且每天都在使用，不幸的是，直到今天关于主题制作的文档还是相当稀缺。所以我打算弥补这个空缺。预先准备Hexo博客的基础使用。如果你是第一次接触，请前往官网阅读教程了解Bootstrap了解Javascript模板引擎（我们将使用EJS）项目描述这个项目旨在制作一个Hexo主题并详细了解Hexo引擎的工作方式。我不想在HTML和CSS上花费太多时间，所以我们将重置下面这个Hexo主题：https://getbootstrap.com/docs… 。它是Bootstrap文档中的一个标准初始模板样例。我们将一步步地重用CSS、复制粘贴HTML，直到最后实现想要的效果。如果你感到困惑或者只对它的代码感兴趣，请前往github。项目结构创建一个新的hexo博客让我们从搭建一个全新的hexo博客开始吧# Create a new foldermkdir hexo-theme-creation cd hexo-theme-creation# Initialise Hexohexo init创建主题文件夹# Enter the theme foldercd themes# bootstrap-blog-hexo is also going to be the name of our thememkdir bootstrap-blog-hexo注意：如果你想在git中保存主题的话（你也应该这么做），请在/themes/bootstrap-blog-hexo/中初始化git。文件夹结构这是我们开始工作所需要的文件和文件夹：|– layout // .ejs templates |– source // source files (CSS, scripts)|– _config.yml创建以下两个文件夹和_config.yml文件。/layout/ 将包含我们所有的EJS模板/source/ 将包含我们所有的资源（CSS文件、外部脚本和库）_config.yml 包含我们的主题配置。现在暂且不写入任何内容。复制bootstrap blog源码从bootstrap blog template复制所有我们需要的源码并放在source文件夹里。你可以选择通过浏览器查看源码并复制下来，或者是下载该压缩包，之后解压到source文件夹里。|– layout |– source |– bootstrap // Copy the boostrap library files here |– css // Copy the blog’s css file here |– favicon |– favicon.ico // Your choice of favicon |– js // Copy the blog’s js file here|– _config.ymlHexo的基本要素在我们开始写第一个模板文件之前，先来看看Hexo博客生成过程的基本要素。页面类型我们能够在主题中定义6种页面类型，与之相对应地，在public文件夹生成的每一个单独的HTML页面都属于下面模板中的其中一个：模板备用模板页面描述index无这是博客的首页，也是网站的主要入口。本教程中我们将让其显示文章摘要列表postindex这是文章的详情页。我们将展示一篇完整的文章以及一个评论区pageindex这是页面的详情页，与post一样，但是是page类型的postarchiveindex这是归档页。它将显示我们博客中所有文章的标题和详情页链接categoryarchive这是分类页。与归档页类似，但是会根据类别进行筛选tagarchive这是标签页。与分类页类似，但是会根据标签进行筛选在本篇教程中我们将创建index模板。在页面生成过程中，Hexo将会搜索名字为index.ejs,post.ejs,page.ejs等的文件，这些模板之后用于创建静态HTML页面。公共布局Hexo支持使用公共的布局文件，上面的模板都将使用到该文件。该文件命名为layout.ejs。不同页面类型的模板会创建一些内容，而这个文件就好比这些内容的“外壳”。在我们的主题中，公共布局将包括：<html>标签、<head>标签、头部、菜单、底部和侧边栏。基本上是所有类型的页面都具备的元素。不同的页面模板将只负责创建实际内容，这些内容将放在我们的主体部位。变量在所有的模板中，我们都可以使用hexo引擎提供的内置变量。以下是部分变量：Site：site包含了网站的信息。例如，我们可以通过site.posts访问博客中的所有文章。当我们想要显示统计数据的时候，这将派上用场。Page：page是主要变量，包含了许多与当前页面相关的信息，包括所有的文章标题、日期、内容等。Config：config是一个指向站点_config.yml文件的JavaScript对象Theme：theme是一个指向主题_config.yml文件的JavaScript对象主题的布局创建上面提及了/layout/layout.ejs文件，现在我们开始来创建它。顶部标签首先创建layout.ejs文件并插入<html></html>标签//layout/layout.ejs<html><!– Head tag –>< partial(’_partial/head’) %></html>这里我们将所有<head>标签里的代码提取出来并放在局部视图中，这有助于实现关注点分离和代码重用。语法是partial(‘path’ [, arguments])在创建layout/_partial/head.ejs文件后，从bootstrap源码中复制head标签里的代码：// layout/_partial/head.ejs<head> <meta charset=“utf-8”> <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> <meta name=“viewport” content=“width=device-width, initial-scale=1”> <meta name=“description” content=""> <meta name=“author” content=""> <link rel=“icon” href=“favicon/favicon.ico”> <title>Blog Template for Bootstrap</title> <!– Bootstrap core CSS –> < css(‘bootstrap/css/bootstrap.min.css’) %> <!– IE10 viewport hack for Surface/desktop Windows 8 bug –> < css(‘css/ie10-viewport-bug-workaround.css’) %> <!– Custom styles for this template –> < css(‘css/blog.css’) %> <!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –> <!–[if lt IE 9]> <script src=“https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src=“https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]–></head>这很简单，我们只需使用CSS helper插入样式表。source文件夹中的文件将会被复制到站点根目录下，所以不要在路径中包含source/我们将让<title>和<meta>标签保持动态，不过现在先暂且不管它们。底部标签底部标签位于</body>之前。我们将在这个局部视图中包含所有脚本。先修改一下布局：// layout/layout.ejs<html><!– Head tag –>< partial(’_partial/head’) %><body> <!– After footer scripts –> < partial(’_partial/after-footer’) %></body></html>然后创建layout/_partial/after-footer.ejs的内容：// layout/_partial/after-footer.ejs<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>< js(‘bootstrap/js/bootstrap.min.js’) %><!– IE10 viewport hack for Surface/desktop Windows 8 bug –>< js(‘js/ie10-viewport-bug-workaround.js’) %>注意JS helper function的使用，它将引用本地js文件。顶部菜单类似地，在<body>标签后创建顶部菜单。// layout/layout.ejs// […]<body> <!– Menu –> < partial(’_partial/menu’) %> // […]layout/_partial/menu.ejs 的内容：// layout/_partial/menu.ejs<div class=“blog-masthead”> <div class=“container”> <nav class=“blog-nav”> <% for (var i in theme.menu){ %> <a class=“blog-nav-item” href="< url_for(theme.menu[i]) %>"><%= i %></a> <% } %> </nav> </div></div>注意theme全局变量的使用,它指向的是主题的_config.yml文件。为了可以在主题配置中配置菜单，我们需要在_config.yml文件中添加配置：_config.yml# Headermenu: Home: / Archives: /archives在menu.ejs中我们遍历了配置文件中所有的菜单项目并创建对应的链接。顶部顶部将位于顶部菜单下面，它包含了博客标题和子标题：// layout/_partial/header.ejs<div class=“blog-header”> <h1 class=“blog-title”><%= config.title %></h1> <p class=“lead blog-description”><% if (config.subtitle){ %><%= config.subtitle %><% } %></p></div>这里我们使用了指向站点_config.yml文件的config变量，它包含了可供配置的标题和子标题属性。注意在布局的<div class=“container”><div>中嵌套顶部：// layout/layout.ejs<html><!– Head tag –>< partial(’_partial/head’) %><body> <!– Menu –> < partial(’_partial/menu’) %> <div class=“container”> <!– Blog Header: title and subtitle –> < partial(’_partial/header’) %> </div> // […]底部底部现在是完全静态的，内容如下：// layout/_partial/footer.ejs<footer class=“blog-footer”> <p>Blog template built for <a href=“http://getbootstrap.com”>Bootstrap</a> by <a href=“https://twitter.com/mdo">@mdo</a>.</p> <p>Adapted to Hexo by <a href=“http://www.codeblocq.com/">klugjo</a>.</p> <p><a href=”#">Back to top</a></p></footer>主要内容和侧边栏此时，我们再加上主要内容和侧边栏，基本就差不多了。下面是最终的layout.ejs：// layout/layout.ejs<html><!– Head tag –>< partial(’_partial/head’) %><body> <!– Menu –> < partial(’_partial/menu’) %> <div class=“container”> <!– Blog Header: title and subtitle –> < partial(’_partial/header’) %> <div class=“row”> <!– Main Content –> <div class=“col-sm-8 blog-main”> < body %> </div> <!– Sidebar –> <div class=“col-sm-3 col-sm-offset-1 blog-sidebar”> < partial(’_partial/sidebar’) %> </div> </div> </div> <!– Footer –> < partial(’_partial/footer’) %> <!– After footer scripts –> < partial(’_partial/after-footer’) %></body></html>body变量对应了不同页面类型模板创建的内容（参见上面）。至于侧边栏，我们现在暂且使用来自bootstrap模板的硬编码：// layout/_partial/sidebar.ejs<div class=“sidebar-module sidebar-module-inset”> <h4>About</h4> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p></div><div class=“sidebar-module”> <h4>Archives</h4> <ol class=“list-unstyled”> <li><a href=”#">March 2014</a></li> <li><a href=”#">February 2014</a></li> <li><a href=”#">January 2014</a></li> <li><a href=”#">December 2013</a></li> <li><a href="#">November 2013</a></li> </ol></div><div class=“sidebar-module”> <h4>Elsewhere</h4> <ol class=“list-unstyled”> <li><a href="#">GitHub</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> </ol></div>首页文件布局到位后，我们就可以开始创建第一个页面类型模板inde.ejs了。这是比较简陋的第一个版本：// layout/index.ejs<span>Content</span>别小瞧它，我们可以用这个在浏览器中测试主题：# Verify that everything is alrighthexo generate# Start hexo serverhexo server访问 http://localhost:4000/ 。哇！注意：不要忘记在站点的config文件中更新主题：_config.yml# Extensions## Plugins: http://hexo.io/plugins/## Themes: http://hexo.io/themes/theme: bootstrap-blog-hexo遍历博客文章我们想要在首页显示各篇文章的摘要。首先，在我们的index.ejs文件中遍历文章：// layout.index.ejs<% page.posts.each(function(item){ %> < partial(’_partial/article-excerpt’, {item: item}) %><% }); %>通过page.posts获取该页面的所有文章通过< partial(’name’, args) %>给partial传参文章布局创建article-excerpt.ejs文件，添加适合主题的代码。这是我的布局：// layout/_partial/article-excerpt.ejs<div class=“blog-post”> <!– Title –> <h2 class=“blog-post-title”> <a href="< config.root %>< item.path %>"> < item.title %> </a> </h2> <!– Date and Author –> <p class=“blog-post-meta”> <%= item.date.format(config.date_format) %> <% if(item.author) { %> by < item.author %> <% } %> </p> <!– Content –> < item.excerpt || item.content %> <!– Only display the Read More link if we are displaying an excerpt –> <% if(item.excerpt) { %> <p> <a href="< config.root %>< item.path %>"> <%= theme.excerpt_link %> </a> </p> <% } %></div>全文链接全文链接是由config.root（配置选项，相当于/）和item.path(相对路径或者绝对路径，指向全文)连接组成的。文章作者默认情况下，Hexo没有关于作者属性的的文章变量。不过我们可以在front matter中添加任意自己想要的变量。如果你想要在文章中显示作者名字，那么文章的front matter应该类似如下进行设置：title: Hello Worldauthor: Klughertz Jonathan—Item excerpt 和 Item content当用Hexo编辑文章时，你可以用<!– more –>标签从文章内容中截取摘要。在本教程中，因为我们展示的是文章列表，所以选择显示摘要。之后用户可以通过点击文章标题或者“阅读更多”的链接浏览全文。“阅读更多”文本别忘了，你需要像我这样在主题的配置文件中添加一个新的属性：_config.yml# Read More textexcerpt_link: Read More希望接下来的代码容易理解。现在，我建议你写一些除了默认的Hello World之外的文章并享受这个结果。分页器在本篇文章中，我们最后需要处理的是首页的分页器。在index.ejs文件中增加一个分页器的partial：// layout/index.ejs<% page.posts.each(function(item){ %> < partial(’_partial/article-excerpt’, {item: item}) %><% }); %>< partial(’_partial/pagination’) %>之后开始创建分页器的内容，layout/_partial/pagination.ejs:// layout/_partial/pagination.ejs<nav> <ul class=“pager”> <% if (page.prev){ %> <li><a href="< config.root %>< page.prev_link %>">Previous</a></li> <% } %> <% if (page.next){ %> <li><a href="< config.root %>< page.next_link %>">Next</a></li> <% } %> </ul></nav>page.prev：上一页的页码。如果当前页是第一页，则为0page.next：下一页的页码。如果当前页是最后一页，则为0page.next_link和page.prev_link是什么就不用多说了。如果你没有足够的文章用来查看分页器的工作效果，可以在主配置文件中（per_page属性）调整每一页的文章数。这就是今天的内容，在下一篇教程中，我们将完成博客剩下的所有页面。 ...

以个人博客为例，博客地址准备工作安装$ npm install -g hexo-cli初始化$ hexo init <folder>$ cd <folder>$ npm install创建新文章$ hexo new “My New Post"运行开发环境$ hexo server$ hexo s构建$ hexo generate$ hexo g部署$ hexo deploy$ hexo d详细准备工作，可以查阅hexo官网安装主题cactus，一个很程序员的主题，推荐！克隆仓库，并且将源文件复制到博客项目中themes目录下git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactusthemes/cactus/_config.yml相关配置,详细解释可以看官方文档# 首页Projects的urlprojects_url: https://github.com/xiaobinwu# 设置页面方向direction: ltr# 首页导航# $ hexo new page about，可以创建page页面nav: home: / about: /about/ articles: /archives/ categories: /categories/ search: /search/# 社交链接social_links: github: https://github.com/xiaobinwu mail: mailto:xiaobin_wu@yahoo.com# 开启标签快捷方式tags_overview: true# 首页 Writing的展示条数posts_overview: show_all_posts: false post_count: 5 sort_updated: false# 排列方式archive: sort_updated: falsepost: show_updated: false# logo设置logo: enabled: true width: 50 height: 50 url: /images/logo.png gravatar: false# ico设置favicon: desktop: url: /images/favicon.ico gravatar: false android: url: /images/favicon-192x192.png gravatar: false apple: url: /images/apple-touch-icon.png gravatar: false# 高亮语法highlight: kimbie.dark# 博客主题色，dark, light, classic, whitecolorscheme: darkpage_width: 48# rss设置rss: atom.xmlopen_graph: fb_app_id: fb_admins: twitter_id: google_plus:# disqus评论，默认不开启，需翻墙disqus: enabled: false shortname: cactus-1# 谷歌统计google_analytics: enabled: false id: UA-86660611-1# 百度统计baidu_analytics: enabled: false id: 2e6da3c375c8a87f5b664cea6d4cb29cgravatar: email: xiaobin_wu@yahoo.comvaline: enable: true app_id: xxxxxx app_key: xxxxxxxValine评论系统themes/cactus/_config.yml配置Valine，需要申请app_id，app_keyvaline: enable: true app_id: xxxx app_key: xxxxthemes/cactus/layout/_partial/comments.ejs,写入<% if(theme.valine.enable) { %> <script src=”//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script> <script src=’//unpkg.com/valine/dist/Valine.min.js’></script> <div id=“vcomments” class=“blog-post-comments”></div> <script> new Valine({ el: ‘#vcomments’, visitor: true, appId: ‘<%=theme.valine.app_id %>’, appKey: ‘<%=theme.valine.app_key %>’, placeholder: ‘ヾﾉ≧∀≦)o来啊，快活啊!’, avatar: ‘robohash’ }) </script><% } %>自动部署hexo博客到阿里云服务器创建仓库(远端服务器创建git仓库),可以使用ssh登入云服务器mkdir blog.git && cd blog.gitgit init –bareHexo配置deploy: type: git message: update repo: root@xx.xxx.xx.xxx:/www/wwwroot/blog.git,master插件安装npm install hexo-deployer-git –save自动部署进入到git仓库hooks目录，并创建钩子post-receivecd /www/wwwroot/blog.git/hookstouch post-receivevim post-receive输入下面脚本：#!/bin/bash -lGIT_REPO=/www/wwwroot/blog.gitTMP_GIT_CLONE=/www/wwwroot/tmp/blogPUBLIC_WWW=/www/wwwroot/blogrm -rf ${TMP_GIT_CLONE}mkdir ${TMP_GIT_CLONE}git clone $GIT_REPO $TMP_GIT_CLONErm -rf ${PUBLIC_WWW}/cp -rf ${TMP_GIT_CLONE}/ ${PUBLIC_WWW}更改权限chmod +x post-receivechmod 777 -R /www/wwwroot/blogchmod 777 -R /www/wwwroot/tmp/blog最后部署$ hexo g -d ...

基于Windows搭建，依托Github的博客。1. Github创建RepositoryRespository的名字必须是:你的github账户名.github.io (下图由于我已经创建过了，所以被标红) 2. 本地安装NodeJS和GitNodeJS官网和Git官网 安装完成后，在CMD中运行如下命令，并能返回版本信息，则说明安装完成。node -vnpm -vgit –version第一次使用Git的话，还需要设置用户名和邮箱，以及配置SSH绑定Github账号。具体可以参考这篇文章。3. 安装Hexo先切换npm到淘宝源。npm config set registry https://registry.npm.taobao.org选择一个新文件夹来存储博客文件，可以命名为Hexo,然后右键选择打开Git Bash,运行npm install hexo-cli -g等待安装完成后，再依次运行 （有时可能需要管理员权限打开Git Bash,再CD到Hexo文件夹）hexo init Hexonpm installhexo g // g是generate的意思hexo s // s是server,即启动服务器这时就可以在本地浏览器访问博客了。 如果有需要，可以更换端口，命令如下hexo s -p 60004. 部署到Github需要在Git Bash中运行下列命令下载插件。npm install hexo-deployer-git –save打开上述的Hexo文件夹中的配置文件：_config.yml 在末尾的deploy中添加如下信息：(respository要更换成自己的地址) 之后运行如下命令，就可以把博客部署到Githubhexo d // d是deploy然后打开Github上的Repository的Settings,在GitHub Pages下就有博客地址了，可以直接访问，但要记住是https,不是http:

上一篇文章写到了如何在Github上用Hexo搭建博客，接下来当然是开始研究如何写博客啦。1. 原始方法在我们放置博客文件的文件夹Hexo中，source/_posts/目录下存放着所有博文的Markdown文件，初始化只有一个hello-world.md文件。 我们可以在Git Bash中创建新博文：hexo new <title>在_posts目录下会生成相应的.md文件，接下来我们可以编辑该文件，直接写博文啦。（注意使用Markdown语法） 写完博文后，执行即可在博客中更新。hexo ghexo d如果要删除博文，则直接把_posts目录下相应的.md文件删除，再执行上述命令即可。PS：关于在博文中插入图片 可以把图片统一放置在source/images目录下，然后在使用时用下述方式引用。更多相关的操作，可以查看Hexo的官网。2. Hexo Admin插件管理可以看出，用原生的方法来管理博文十分的不便，因此便有了Hexo Admin这一插件来方便我们的操作。 首先，安装插件。npm install –save hexo-admin启动服务器。hexo server -d即可在localhost:4000/admin/中编辑博文了。然后，Deploy之前，还需要编辑配置文件_config.yml。(否则会出现Error: Config value “admin.deployCommand” not found或者Error: spawn hexo ENOENT之类的报错。) 如果是Windows则在末尾加上然后在同级目录新建hexo-pubish.bat文件，文件内容如下：hexo g -d如果是Linux系统则参考Issues。 编辑完毕后，就可以点击Deploy，直接部署发布Github博客上。 PS：关于Hexo Admin插入图片 Hexo Admin可以直接复制图片粘贴，然后自动下载到source/images目录并重命名。但在Windows中粘贴后会出现裂图。这时就需要手动把括号中的前后两个斜杠去掉，就能正常显示。

序本文是hexo-enchancer插件的中文版文档.英文版：https://github.com/sisyphsu/h…博文链接： https://sulin.me/2019/Z726F8….介绍hexo-enhancer是一个Hexo功能增强插件。此插件支持的功能较多，并且未来会继续增加，可以理解为插件包。到目前为止，此插件支持的功能如下：自动生成title：根据文件名自动生成标题。自动生成date：根据文件名自动生成日期，具体策略类似Jekyll。自动生成abbrlink：根据标题进行base32和crc32生成短链接。自动生成categories：根据文件的路径解析文章所属分类。自动生成tags：根据配置在_config.yml中的可用tags和keywords自动扫描文章中出现的标签。正常情况下编写的Hexo文章需要在markdown头部手动指定许多属性，例如：—title: Titledate: 2019-03-05categories: [A, B]tags: [tag1, tag2]—# TitleThis is a markdown file, in categories [A, B], with tags [tag1, tag2]. 使用hexo-enhancer插件之后，以上Front-matter完全不需要手动指定：# TitleThis is a markdown file, in categories [A, B], with tags [tag1, tag2].消失的Front-matter完全按照约定规则由hexo-enhancer自动生成，让你可以更加惬意简单地撰写博文。安装npm install hexo-enhancer –save或yarn add hexo-enhancer用法 — date 和title我在使用Hexo之前，曾经用过一段时间Jekyll，抛开整体不谈，个人感觉Jekyll的文件名整合日期和标题的策略挺不错的，使用Hexo之后为了维护Front-matter真的很烦。因此本插件中也实现了类似的文件名策略，即直接将 date + title放在文件名里面，由插件在Hexo编译时动态解析这些属性，整个过程非常简单方便。hexo-enhancer解析文件名的正则表达式如下:/^.?(\d{4})[-]?(\d{2})[-]?(\d{2}).?[-_.@# ](.)$/如果你熟悉正则表达式的话，就知道具体格式多么灵活了，以下所有格式都可以被正确解析：20091010-Title.md2009-10-10_Title.md2009-10-10-Title.md2009/10/10#Title.md2009/10/10@Title.md[20091010]-Title.md【20091010】Title.md「20091010」-Title.mdhexo-enhancer 会将以上文件名全部解析为（最终结果不会回写入.md文件中）：—title: Titledate: 2009-10-10—用法 — categorieshexo-enhancer 会将.md文件所在目录及父目录的名称添加入categories属性中，因此你应该按照文章分类放置.md文件，事实上大多数人一直都这么做的。比如 _posts/区块链/比特币/20091010-比特币简介.md 文章将自动获得下面的categories属性：—title: 比特币简介date: 2009-10-10categories: [区块链, 比特币]—用法 — tags我一直认为，文章标签不应该手动维护，因为这样做太麻烦且容易遗漏，最终导致标签非常混乱。正确的做法应该是，将常见的标签关键词全局配置好，然后根据配置好的标签关键词，自动扫描每篇文章包括哪些关键词并生成tags属性。hexo-enhancer的做法就是这样，启动后扫描_config.yml中的keywords与tags属性收集全局标签候选词，然后给每一篇文章自动扫描tags。例如，_config.yml配置的标签可以是这样的:keywords: HTML, JavaScript, Hexotags: Java, Golang, React, Vuehexo-enhancer会扫描您的.md文章，如果文章内出现以上关键词，则自动将其分配如文章的tags属性中。需要特别指出的是，keywords是标准配置，它最终会出现在网页meta中，而tags是自定义的属性，只会被本插件使用。用法 — abbrlinkhexo-enhancer使用 base32(crc32(title)) 算法为每一篇文章分配abbrlink属性，您可以在permlink中使用它们:permalink: :year/:abbrlink.html# permalink: :year/:abbrlink# permalink: posts/:abbrlink.html# permalink: :year/:month/:day/:abbrlink.html使用abbrlink之后，文章的url就会变得非常简洁，例如 https://sulin.me/2018/3055NXV.html有一些插件会根据标题的拼音、翻译生成permlink，但是我感觉这些都不是好的做法。事实上url不宜太长，将一句话放在url中并不一定增强所谓的seo优化，反倒导致其使用起来相当不便。就像许多博客平台一样，为每篇文章分配短小且唯一的url即可，无论是看起来还是用起来都很方便。LicenseMIT ...

网上已经有很多NexT主题配置的教程，一搜一大堆；所以我这边就简单说一下我个人（没那么搞）的一些配置,这些配置大部分在主题上已经存在，只需要将其value设为true,或者先下载dependency在设为true基础配置网站图标favicon: small: /images/icon.jpeg apple_touch_icon: /images/icon.jpeg safari_pinned_tab: /images/logo.svg 网站底部小人换成红心形footer: # Specify the date when the site was setup. # If not defined, current year will be used. #since: 2015 #此处可设置网站建站时间 # Icon between year and copyright info. icon: # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/ # heart is recommended with animation in red (#ff0000). name: heart # If you want to animate the icon, set it to true. animated: false # Change the color of icon, using Hex Code. color: “#808080"备案 beian: enable: true icp: 你的备案号 社交网站图标链接(把想要显示的网站前面#去掉，改为自己的网站链接,并将下面的social_icons的enable属性设为true就ok) # Social Links # Usage: Key: permalink || icon # Key is the link label showing to end users. # Value before || delimeter is the target permalink. # Value after || delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded. social: GitHub: https://github.com/dasnnj || github E-Mail: mailto:dasnnj@outlook.com || envelope #Weibo: https://weibo.com/yourname || weibo #Google: https://plus.google.com/yourname || google #Twitter: https://twitter.com/yourname || twitter #FB Page: https://www.facebook.com/yourname || facebook #VK Group: https://vk.com/yourname || vk #StackOverflow: https://stackoverflow.com/yourname || stack-overflow #YouTube: https://youtube.com/yourname || youtube #Instagram: https://instagram.com/yourname || instagram #Skype: skype:yourname?call|chat || skype social_icons: enable: true #设为true icons_only: false transition: false 头像# Sidebar Avataravatar: # in theme directory(source/images): /images/avatar.gif # in site directory(source/uploads): /uploads/avatar.gif # You can also use other linking images. url: /images/icon.jpeg # If true, the avatar would be dispalyed in circle. rounded: true #显示圆形头像 # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar. opacity: 1 # If true, the avatar would be rotated with the cursor. rotated: false #设为true则鼠标移到头像上时候，鼠标显示为手 显示摘要 （下面的enable设为true即按照下面设定的高度显示摘要；官方推荐使用<!– more –>自定义摘要长度;read_more_btn设为true显示继续阅读按钮# Automatically Excerpt. Not recommend.# Use <!– more –> in the post to control excerpt accurately.# 显示摘要，不显示全文auto_excerpt: enable: false length: 150# Read more button# If true, the read more button would be displayed in excerpt section.read_more_btn: true高级配置打赏功能# Reward# If true, reward would be displayed in every article by default.# And you can show or hide one article specially through add page variable reward: true/false.# 打赏reward: enable: true comment: 坚持原创技术分享，您的支持将鼓励我继续创作！ wechatpay: /images/xxx.png alipay: /images/xxx.jpg # bitcoin: /images/unionpay.jpg 网站访问次数统计busuanzi_count: enable: true total_visitors: true total_visitors_icon: user total_views: true total_views_icon: eye post_views: true post_views_icon: eye 本地搜索(需要npm安装denpendency)# Local search# Dependencies: https://github.com/theme-next/hexo-generator-searchdblocal_search: enable: true # if auto, trigger search by changing input # if manual, trigger search by pressing enter key or search button trigger: auto # show top n results per article, show all results by setting to -1 top_n_per_article: 1 # unescape html strings to the readable one unescape: false参考主题提供的github地址https://github.com/theme-next/hexo-generator-searchdb， 在博客根目录下执行npm install hexo-generator-searchdb –save图片弹出效果（鼠标移到图片上显示放大镜效果）请参考：https://github.com/theme-next/theme-next-fancybox3.进入next主题目录下执行git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox 通过配置fancybox，让网站中图片可以放大（注意最终效果是clone到主题下面的source/lib/fancybox里面，而不是项目根目录的source/lib/fancybox）,然后在主题配置的_config.yml中，搜索fancybox，改为fancybox: true# Fancybox. There is support for old version 2 and new version 3.# Choose only any one variant, do not need to install both.# To install 2.x: https://github.com/theme-next/theme-next-fancybox# To install 3.x: https://github.com/theme-next/theme-next-fancybox3#图片展示效果imgfancybox: true压缩代码（我使用的是all_minifier来优化代码）具体请参考：https://github.com/chenzhutian/hexo-all-minifier博客根目录下执行npm install hexo-all-minifier –save在nexT主题的_config.yml中添加 all_minifier：true无需其他操作，便可在执行hexo g生成静态代码时候自动压缩看到很多人用的gulp.js来压缩，但是会报错，而且网上很多人给出的解决方案已经不能用了，我这边解决方案是一月份我使用的，是ok的具体参考其他人的gulp安装；在博客根目录下面新建gulpfile.js,将下面代码复制进去，剩下的压缩操作和其他人的博客是相同的var gulp = require(‘gulp’);//Plugins模块获取var minifycss = require(‘gulp-minify-css’);var uglify = require(‘gulp-uglify’);var htmlmin = require(‘gulp-htmlmin’);var htmlclean = require(‘gulp-htmlclean’);//压缩cssgulp.task(‘minify-css’, function () { return gulp.src(’./public//*.css’) .pipe(minifycss()) .pipe(gulp.dest(’./public’));});//压缩htmlgulp.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 不压缩min.jsgulp.task(‘minify-js’, function () { return gulp.src([’./public/**/.js’, ‘!./public/**/*.min.js’]) .pipe(uglify()) .pipe(gulp.dest(’./public’));});//4.0以前的写法 //gulp.task(‘default’, [ // ‘minify-html’, ‘minify-css’, ‘minify-js’//]);//4.0以后的写法// 执行 gulp 命令时执行的任务gulp.task(‘default’, gulp.parallel(‘minify-html’, ‘minify-css’, ‘minify-js’, function() { // Do something after a, b, and c are finished. return new Promise(function(resolve, reject) { console.log(“gulp finished”); resolve(); } )} )); 感谢http://darryrzhong.site/categories/Hexo搭建博客/https://www.jianshu.com/p/3ff20be8574chttps://www.jianshu.com/p/344cf061598dhttps://www.jianshu.com/p/44e601a7567a ...

在部署成功之后，我尝试了十几种主题，最终决定使用Even。在不断替换主题的过程中，我渐渐对Hexo的目录结构有了一些清晰的认识。本文将简单介绍Hexo的目录结构。deploy后的目录结构在执行过Hexo deploy命令之后，目录结构有所变化，新增了.deploy_git，public，.gitignore。_config.yml初始化时自动创建。用来配置博客相关的参数。具体参数设置，参照配置|Hexo。node_modules 和 package.json都是在初始化时自动创建。node_modules用来存储已安装的各类依赖包。package.json用来查看Hexo的版本以及相关依赖包的版本。Hexo会默认安装：hexo：主程序hexo-deployer-git：实现git部署方式hexo-generator-archive：存档页面生成器hexo-generator-category：分类页面生成器hexo-generator-index：index生成器hexo-generator-tag：标签页面生成器hexo-renderer-ejs：支持EJS渲染hexo-renderer-marked：Markdown引擎hexo-renderer-stylus：支持stylus渲染hexo-server：支持本地预览，默认地址 localhost:4000在使用过程中，尤其是更换主题时，需要安装其它的依赖包。比如：hexo-renderer-scss：支持scss渲染。Even主题需要安装此依赖包。新安装的依赖包，也会保存在node_module文件夹下。scaffold初始化时自动创建。模板文件夹。包含page，post，draft三种模板，分别对应 页面、要发布的文章、草稿。themes初始化时自动创建。主题文件夹。每一个主题，都有一个单独的文件夹。默认主题为landscape。这里值得注意的是，Hexo配置文件中的language参数的值，取决于每个主题文件夹（如landscape）下的language文件夹里的文件名。source ， public 和 .deploy_gitsource：资源文件夹。用来存放图片、Markdown文档（文章、草稿）、各种页面（分类、关于页面等）。public：将source文件夹里的Markdown文档，转换成index.html。再结合主题进行渲染，就是我们最终看到的博客。.deploy_git：将public文件夹的内容提交到Github后生成，内容与public文件夹基本一致。这三者的关系大致是：source -> public -> .deploy_git执行hexo generate，根据source，更新 public。执行hexo deploy，根据public，更新 .deploy_git。了解了这三个文件夹的关系，也就了解为什么自定义域名需要添加的 CNAME 文件要在 public 文件夹下创建了。参考文档Hexo中文文档hexo目录结构小探

准备工作GitNode.jsGithubGit 和 Node.js 是安装 Hexo的必备程序。请下载安装包后自行安装。使用 Github Pages 功能，完成静态网站发布。笔者的软件环境：操作系统：Windows 10 专业版 version 17134.590Git：version 2.20.1.windows.1Node.js：version 10.15.1创建RepoRepo的名称，按照 username.github.io 进行命名。把 username 换成你的 GitHub 账号的 username 。安装Hexo$ npm install -g hexo-cli$ hexo -v #检验是否安装成功在命令提示符，直接运行指令，即可进入安装流程。此处安装的，是 Hexo 运行环境。建站$ hexo init <folder> #须在空目录下执行$ cd <folder>$ npm install执行后，生成如下目录：其中，_config.yml 是配置文件。在部署时需要修改部分参数。部署$ npm install hexo-deployer-git –save先安装 hexo-deployer-git，之后修改目录下的配置文件deployment模块。deploy: type: git repo: https://github.com/JiLuanxi/jiluanxi.github.io.git branch: message: 参数说明：repo：直接复制 Repo 的URL即可branch：默认 push 到哪个分支。如果为空，则默认 push 到 master 分支message：默认提交信息。如果为空，则默认为 Site updated: {{ now(‘YYYY-MM-DD HH:mm:ss’) }}$ hexo deploy运行后，即可将网站部署到服务器上。在浏览器中输入 username.github.io 就可以正常访问了。如果需要自定义域名，需要：在域名服务提供商处，做好域名解析。在master分支下， CNAME 文件（无后缀），内容直接写注册的域名即可。几点建议配置文件 _config.yml 千万不要使用记事本打开。记事本不会保存为UTF-8的编码。如果你的博客名称是中文，会在网站上显示成乱码。建议使用Atom或者Sublime Text 打开。本文仅简单介绍安装、部署流程，不涉及配置文件、主题修改、Markdown语法等内容。参考文档Hexo官方文档Github Pages ...

前情提要本文详细记录了使用Heroku，解决gitment登录失败，报[object ProgressEvent]的问题。某种程度上借助了网友的思路和方法,并使用了免费的强大的Heroku。某些步骤可能需要梯子。（废话少说直接开干） gitment登录失败，报[object ProgressEvent]，原作者的服务无法访问。然后去GitHub的issue找解决办法，发现一群网友也遇到了同样的问题。有大佬说直接使用github认证的接口// 将 gitment.js中的 _utils.http.post(‘https://gh-oauth.imsun.net’, {})// 改为_utils.http.post(‘https://github.com/login/oauth/access_token', {})如果你的网站使用的是GitHub Page,并且使用GitHub提供的域名，如“https://yiluyanxia.github.io/…”， 那么你只需要做到这一步就可以重新正常使用gitment，但是你和我一样作，偏要没事捣鼓一个自己的域名，那你就要往下看了。 从自己的域名直接访问github认证的接口，这样就跨域了。原作者应该也是考虑到这点，才会自己搭建一个访问github认证的node服务。废话少说直接开干Heroku是一个支持多种编程语言的云平台即服务，注册Heroku，在右上角的“new”，选择“Create New App”新建一个应用。根据操作系统下载并安装Heroku CLI，或者使用npm install heroku。 npm install heroku登陆heroku，OS X输入指令之后，会自动打开一个页面，而Windows要手动输入账号密码。（不知道亲们是不是也是一样） heroku login2和3的详细介绍可以看这里–>开始你的node服务详细步骤获取gh-oauth-server git clone https://github.com/imsun/gh-oauth-server.git修改package.json，在script中添加如下代码 “heroku”: “NODE_ENV=production node server"新建Procfile文件,输入以下内容 web: npm run heroku在heroku上找到你刚刚创建的应用，切换到“Deploy”,有详细的操作步骤，$ heroku git:clone -a YourAppName$ cd YourAppName$ git add .$ git commit -am “make it better”$ git push heroku master切换到“Settings”，找到“Domain”的值，即应用的地址。// 将 gitment.js中的 _utils.http.post(‘https://gh-oauth.imsun.net’, {})// 改为_utils.http.post(‘https://YourAppName.herokuapp.com/', {})至此，所有的步骤走完，你就可以愉快的使用gitment了。当然，如果你有自己的服务器，发布到上面是最好的。但本渣没有这个能力！！！

原文见记一次Hexo迁移很久没有写过Blog了, 而且也把系统换成了Manjaro, 所以又要再配置一次Hexo的环境等等, 为了下次迁移的时候, 能更快的搞定, 所以记录一下这次迁移的过程.获取源文件Hexo如果需要迁移的话, 只需要保留以下几个文件即可:_config.ymltheme/source/scaffold/package.json.gitignore因为之前已经迁移过一次了, 所以我的源文件都已经保存在github上了, 在wuxiaobai24.github.io起了一个save分支来保存文件.所以获取源文件, 我只需要:$ git clone git@github.com:wuxiaobai24/wuxiaobai24.github.io.git安装Hexo这一步网上大多教程都写的很清楚了, 这里简略提一下, 主要是以下几个步骤:安装npm用npm安装hexohexo init blog把上面提到的源文件全部拷贝到blog文件夹中注意:这里的blog文件最好放在wuxiaobai24.github.io目录下, 这样利用backups.sh可以很快的把源文件拷贝到blog文件夹中, 但是记得把backups.sh里面最后三行关于git的删去或注释掉安装依赖首先先把主题安装下来先, 之前因为忘记了这个, 导致hexo generate失败$ git clone git@github.com:litten/hexo-theme-yilia.git themes/yilianpm install检测是否成功$ hexo g$ hexo s构建快速的写作环境将blog移到任何你想要放的位置, 然后把之前的wuxiaobai24.github.io文件夹删去在blog目录下, git clone git@github.com:wuxiaobai24/wuxiaobai24.github.io.git在vscode中安装vscode-hexo插件主要的工作流为:vscode中> hexo new生成新的文章写文章, 并> hexo generatevscode中> hexo deplot部署最后在命令行下切换到blog/wuxiaobai24.github.io中, 执行backups.sh备份源文件.PS: 个人建议把主题的config.yml也备份一下.

本文作者：CODING 用户 - 廖石荣关于持续集成的概念持续集成指的是，频繁地（一天多次）将代码集成到主干。持续集成的过程如图所示：CI 过程：代码编写 -> 源代码库（GitHub or gitlab）-> CI 服务器（代码构建、自动化测试、结果反馈【构建结果】）涉及 CI 工具：Jenkins、Travis CI、TeamCity、Gitlab CI、CircleCI、Codeship 等，相关资料可以查询对应的官网，其中应用广泛的 Jenkins 和 Travis CI，Gitlab CI 是开源的 Rails 项目 GitLab 的一个组成部分，GitLab CI 能与 GitLab 完全集成，可以通过使用 GitLab API 轻松地作为项目的钩子。关于持续集成的优点快速发现错误。每完成一点更新，就集成到主干，可以快速发现错误，定位错误也比较容易。防止分支大幅偏离主干。如果不是经常集成，主干又在不断更新，会导致以后集成的难度变大，甚至难以集成。持续集成服务的选择关于网上集成服务的工具很多，其中尤其以 Jenkins 服务最受欢迎，但是 Jenkins 服务需要在自己服务器上进行配置安装，以及安装各种插件，对于刚上手的小白来说，可能存在一定的门槛，操作步骤繁多，操作不够智能，不是真正的自动化运维，缺少一键发布构建服务。所以我们选择了「CODING 持续集成」。CODING 提供的集成服务是什么CODING 推出的持续集成服务，「CODING 持续集成」是基于 Jenkins 的，兼容 Jenkinsfile 配置文件，如果您之前有使用过或者写过 Jenkinsfile 相信您会很快上手。如何使用 CODING 持续集成服务「CODING 持续集成」是基于 Jenkins 的，通过 Jenkinsfile 配置文件完成CI的步骤，接下来将引导您一步步创建一个持续集成示例。登录 coding，进入项目中心，点击左边菜单集成服务，开通集成服务，配置完成之后会手动触发第一次构建过程找到或者创建 Jenkinsfile，如果你对于Jenkins 比较熟悉的话，可以自己编写 Jenkinsfile 配置文件，也可以采用CODING 提供的模板文件，如下我就采用了Jenkinsfile 模板文件来实行自动化持续集成服务，您可以在修改 Jenkinsfile 的时候修改触发方式，您可以自行选择是推送到某个标签或者某个分支时间触发构建。jenkins 以及能够为 agent 默认配置好 timezone 和 localtime（默认中国上海）配置好 Jenkinsfile 文件以及配置好环境变量，点击保存，便可以进行持续集成项目了如图所示，集成步骤分为拉取代码-》构建-》测试-》部署等步骤，点击每个步骤可以看到相应的命令执行情况，下面来一个一个步骤配合 Jenkinsfile 文件解释命令的一些执行情况：1.检出项目，如下所示 Jenkinsfile 配置文件第一步通过 Git 检出在远程仓库分支的代码，至于哪个分支可以通过环境变量配置读取 REF 这个环境变量stage(“检出”) { steps { sh ‘ci-init’ checkout( [$class: ‘GitSCM’, branches: [[name: env.GIT_BUILD_REF]], userRemoteConfigs: [[url: env.GIT_REPO_URL]]] ) } }如上图所示，第一步主要是执行从 Git 仓库远程拉取代码，所以命令都是 Git 里面的，包括读取 Git 配置的环境变量包括更新 Jenkinsfile 文件2.构建项目,如下命令所示构建这一步主要是初始化代码和打包代码，因为我们这个工程是以 Node.js 为主要开发语言，所以重点关注 Node.js 版本和 安装 hexo 脚手架命令即可打包，目前Coding 提供的语言环境包括了 java-1.8.0_181, go-1.7.4, node-10.11.0, php-7.0.30, ruby-2.3, python-2.7.13 等。如有需要可以联系客服进行开通其它语言环境。stage(“构建”) { steps { echo “构建中…” sh ‘go version’ sh ’node -v’ sh ‘java -version’ sh ‘php -v’ sh ‘python -V’ sh ‘gcc -v’ sh ‘make -v’ // 请在这里放置您项目代码的单元测试调用过程，例如: // sh ‘mvn package’ // mvn 示例 // sh ‘make’ // make 示例 sh ’npm install -g hexo-cli’ //安装hexo 脚手架 echo “构建完成.” // archiveArtifacts artifacts: ‘**/target/.jar’, fingerprint: true // 收集构建产物 } }因为这个 Hexo 项目是以 Node.js 为主的项目，所以在 Jenkinsfile 文件命令里面其实可以把其它语言的检查版本命令去掉，只需要执行 node - v 命令即可3.测试项目,如下所示，如果是 maven 项目可以通过 mvn 命令执行测试语句，我们 Hexo 这个工程通过 hexo 脚手架构建测试命令即可，如果单元测试不通过则会显示不通过，（hexo 对文件格式存在要求，如果文件格式不符合正规 MarkDown 语法，则会抛出错误）stage(“测试”) { steps { echo “单元测试中…” // 请在这里放置您项目代码的单元测试调用过程，例如: sh ‘hexo clean’ //清除缓存 sh ‘hexo g ’ // 将 md 文件构建为 html 页面示例 echo “单元测试完成.” // junit ’target/surefire-reports/.xml’ // 收集单元测试报告的调用过程 } }*正确构建测试结果如下图：4.部署项目如下所示，部署项目命令可以执行自己写的部署脚本文件，也可以配置好“_config.yml”文件之后直接执行 hexo 脚手架自带的命令。如下图整个代码结构图：配置文件部分截图：部署命令：stage(“部署”) { steps { echo “部署中…” // 请在这里放置收集单元测试报告的调用过程，例如: // sh ‘mvn tomcat7:deploy’ // Maven tomcat7 插件示例： // sh ‘./deploy.sh’ // 自研部署脚本 sh ’npm install hexo-deployer-git –save’ // 安装 deploy 脚手架 sh ‘hexo deploy’ // 部署 echo “部署完成” } }服务启动展示系统主页，可以作为团队以及小型公司共享文件的社区论坛，hexo 构建速度快，采用纯静态框架，语法采用纯markdown 语言，适合编写文档。页面详情，可以通过配置是否开启评论功能以及可以添加赞赏功能，并且可以统计字数，建议时长等功能，分类标签等适合文档归集等功能总结CODING 是一个面向开发者的云端开发平台,提供 Git/SVN 代码托管、任务管理、在线 WebIDE、Cloud Studio、开发协作、文件管理、Wiki 管理、提供个人服务及企业服务，其中「CODING 企业版」实现了 DevOps 流程全自动化，为企业提供软件研发全流程管理工具，打通了从团队构建、产品策划、开发测试到部署上线的全过程。 集成了 Jenkins 等主流企业开发流程工具，如上所示，这个 Hexo 博客便可以在 CODING 上面实现团队协作开发，一键部署作为团队以及公司文档共享社区论坛等作用。本文适量引用：阮一峰的博客 ...

问题：hexo d 时出现错误 Error: ERROR: Permission toremote: Permission to huweihuang/hexo-theme-huweihuang.git denied to wanghaijuan.fatal: unable to access ‘https://github.com/huweihuang/hexo-theme-huweihuang/': The requested URL returned error: 403FATAL Something’s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.htmlError: remote: Permission to huweihuang/hexo-theme-huweihuang.git denied to wanghaijuan.fatal: unable to access ‘https://github.com/huweihuang/hexo-theme-huweihuang/': The requested URL returned error: 403 at ChildProcess.<anonymous> (D:\project\blog\hexo-huweihuang\node_modules\hexo-deployer-git\node_modules\hexo-util\lib\spawn.js:37:17) at emitTwo (events.js:126:13) at ChildProcess.emit (events.js:214:7) at ChildProcess.cp.emit (D:\project\blog\hexo-huweihuang\node_modules\cross-spawn-async\lib\enoent.js:37:29) at maybeClose (internal/child_process.js:925:16) at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)原因：huweihuang/hexo-theme-huweihuang.git 拒绝接受 wanghaijuan。 说明当前有两个github账号,可以更新博客, 新的github账号没有配置好。解决办法：在Github生成新的SSH密钥配置步骤：一、生成新的SSH密钥1、打开Git Bash。2、 进入.ssh 根目录下。cd /.ssh3、输入GitHub电子邮件地址，其中your_email@example.com是您关联的GitHub邮箱。ssh-keygen -t rsa -b 4096 -C “your_email@example.com"4、输入保存的密钥文件并接受默认文件地址，按Enter键// 用提供的电子邮件作为标签创建一个新的ssh密钥。（无需操作）Generating public/private rsa key pair. // 输入名称并按Enter键，其中hexo_rsa可自行设置Enter a file in which to save the key (/c/Users/you/.ssh/id_rsa):hexo_rsa5、输入安全密码，没有则为空，按Enter键进行下一步Enter passphrase (empty for no passphrase): [Type a passphrase]Enter same passphrase again: [Type passphrase again]此时，应该在默认路径下，生成了两个文件，一个是hexo_rsa，另一个是hexo_rsa.pub；二、将SSH密钥添加到SSH-Agent在将新的SSH密钥添加到SSH-Agent管理密钥之前，您应该检查现有的SSH密钥。ls -al / .ssh看下返回的结果中是否已经存在了.pub结尾的文件，如果没有需要生成一个新的，如果存在了，直接看将SSH密钥配置到Github账户；6、启动ssh-agent，执行命令：eval $(ssh-agent -s)返回agent的Pid：7、将SSH密钥添加到SSH-Agent,其中hexo_rsa是生成SSH设置的名称ssh-ADD /.ssh/hexo_rsa8、打开hexo_rsa.pub文件，复制其内容，然后打开Github账户，按图片步骤设置，最后将复制内容放置Key内容中，设置title，点击添加即可。验证SSH链接是否成功：输入命令：ssh -T git@github.com你将会看到输入Yes就可以啦相关链接： https://help.github.com/artic… ...

写在前面的话其实我也是这两天才接触到Hexo，之前是用的wordpress在阿里云上挂着。觉得Hexo好像更符合现在我的审美，so, do it!嗯前面安装git和node.js我这边就省略掉了。作为一个爱搞事的，这些东西电脑上都有还有就是我照着网上的教程是没问题，但是走到一些页面的小功能的时候，就不起作用了，可能是版本更新不兼容了<!– more –>一. 安装Hexo，初始化npm install -g hexo全局安装Hexo 创建一个文件夹如blog，不用进去（可以用hexo -v检验是否安装成功）hexo init blog 初始化这个blog和文件夹名字要一样，否则又创建个新的npm install安装所需要的依赖后面就 hexo s -g 就是发布之前先生成静态文件 ，s:server，g:generate，访问下localhost:4000看ok不（不起作用，提示什么hexo <commands> 什么东西了，就进到blog的目录下，使用hexo命令）应该没有5了，如果上面没成功，那你去搜搜别人的初始化都怎么弄的，然后再回来看我剩下的实践二. 创建github公开库有个point就是创建Repository的名字格式是 username.github.io，（看到有的博主只用的username就行，你可以尝试一下，不行的话删了就行）比如我的是 dasnnj.github.io，是为了能生成page服务图片描述两步，输入Repository name，然后点击 create repository 按钮图片描述建错删除的话，点进去新建的库，点击setting，点击最下面的删除，需要输入库的名字才能确认删除图片描述没问题的话，还是要点进去setting，往下面滑动到GitHub Pages标题下面，照着那个链接点进去，不出意外就能直接访问到你的这个repository三. 创建腾讯云开发者平台（或Coding）公开库项目地址格式是 username.coding.me，格式不对会404哦，项目名称随便，确定就ok图片描述创建完记得进入代码浏览，初始化一下项目，添加一个readme文档就行了进入page服务，然后开启图片描述四. 配置服务并将文件部署到Github复制上面创建的两个库的git地址修改最下面的deploy，格式类似我这样的# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: type: git repo: github: https://github.com/dasnnj/dasnnj.github.io.git,master coding: https://git.dev.tencent.com/dasnnj/dasnnj.coding.me.git,master # 腾讯 # coding: https://git.coding.net/dasnnj/dasnnj.coding.me.git,master # Coding执行hexo clean && hexo g && hexo s 清除缓存，生成静态文件，本地发布页面上没问题的话，就可以执行hexo d会弹出输入github账号密码，和腾讯开发者平台的账号密码。我的只输了一次，可能是我安装了tortoiseGit的原因？好像后面自动给我创建了私钥公钥部署成功，按照各自平台的pages服务提示的网址即可访问五. 其他配置（目前都是关于博客根目录下面的_config.yaml的修改）博客标题title: life is love # 主标题subtitle: 记录生活和学习 # 副标题description: Nothing is impossible, the word itself says I’m possible. # 个人描述keywords: author: Dasnnj # 用户language: zh-CN # 语言，不填默认英文timezone: Asia/Shanghai # 时区urlurl: / #这里如果你只部署了一个平台，那么填那个平台的地址，或者/都行，如果你部署在了两个平台上，那么就只写/吧root: /permalink: :year/:month/:day/:title/ # 链接格式https://newblog.dasnnj.cn/2019/01/26/标题名字/# 也可设置为根据 category/:title/ 分类/标题名字 # category/:title.html会在标题名字后面加上.htmlpermalink_defaults:时间格式date_format: YYYY-MM-DD HH:mm:ss time_format: HH:mm:ss这里给date加上小时分钟等，是为了解决新建页面，发表时间只显示日期没有时间其他# Directory source_dir: source #资源文件夹，这个文件夹用来存放内容public_dir: public #公共文件夹，这个文件夹用于存放生成的站点文件。tag_dir: tags # 标签文件夹 archive_dir: archives #归档文件夹category_dir: categories #分类文件夹code_dir: downloads/code #Include code 文件夹i18n_dir: :lang #国际化（i18n）文件夹skip_render: #跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。 # Writingnew_post_name: :title.md # 新文章的文件名称default_layout: post #预设布局titlecase: false # 把标题转换为 title caseexternal_link: true # 在新标签中打开链接filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写render_drafts: false #是否显示草稿post_asset_folder: false #是否启动 Asset 文件夹relative_link: false #把链接改为与根目录的相对位址 future: true #显示未来的文章highlight: #内容中代码块的设置 enable: true line_number: true auto_detect: false tab_replace:新建文章模板的key对应的含义属性 描述title 标题``slug 网址``layout 布局。默认为 default_layout 参数。``path 路径。默认会根据 new_post_path 参数创建文章路径。date 日期。默认为当前时间。我这篇文章的信息title: 将Hexo同时部署在github和腾讯云开发者平台或Coding初级实践教程date: 2019-01-26 20:52:03tags: [Hexo,github,coding] # 标签categories: - tech # 分类持续更新，下面大概要写我的next主题的一些配置，没有网上的大佬那样很全，但是对我来说很足够了（可能是版本不同，网上大佬的有部分可能不适用现在的，我这边会给出我的解决方法）##### 参考hexo的目录结构 - 一直玩编程官方文档 [1]: /img/bVbnQH4 [2]: /img/bVbnQH7 [3]: /img/bVbnQIc [4]: /img/bVbnQId ...

原文：Hexo git deployer removes commits history? Let’s do something about that!我发现 Hexo 是构建博客和应用许多知名的软件开发原则的好工具，其中之一是自动化。这就是我决定将此博客与 Travis CI 集成以执行 GitHub pages 部署的原因。但几天之后我注意到一个重要问题 - 从 CI 服务器部署新版本的博客导致从 master 分支中删除所有提交并从一次又一次地初始化提交开始。我花了一段时间才找到解决这个问题的工作方案。这篇博文解释了这个问题的简单解决方案。<!–more–>为什么 hexo deploy 会首先删除历史记录？让我们从了解实际发生的事情开始。当你为 git 部署选项运行 hexo deploy [1]命令时，Hexo 会创建一个名为 .deploy_git 的隐藏文件夹，并将生成的文件从 public 文件夹复制到该文件夹。接下来，它初始化目标为 Hexo 远程部署分支的git存储库（如果它尚不存在），并从该文件夹执行 git push –force 到仓库和你在 _config.yml [2]文件中定义的分支。清单1. 博客的部署配置deploy: type: git repo: git@github.com:wololock/wololock.github.io.git branch: master如果你从本地计算机构建和部署博客，并且永远不会删除（或意外丢失）你的博客源代码，你可能永远不会遇到此问题。当你从未被擦除的工作空间执行此操作时，则存在具有完整历史记录的文件夹 .deploy_git，并且 hexo deploy 仅推送实际修改的那些文件。当你迁移到像 Travis CI 这样的 CI 服务器时，这就变了，因为它使用干净的工作区和仓库的新克隆执行构建。在这种情况下，.deploy_git 文件夹根本不存在，将从头开始重新创建。那么如何部署和保存历史呢？我发现解决方案非常简单。以前我负责部署的 .travis.yml 文件部分看起来像这样：清单2. 以前的 Travis CI 部署配置deploy: skip_cleanup: true provider: script script: hexo deploy on: branch: develop只要我将更改推送到 develop 分支，它就会触发 hexo deploy。在这种情况下，它最终创建了一个新的 .deploy_git 文件夹并强制将初始提交推送到 GitHub 仓库。然后，我做了一个小改进 - 我创建了一个简短的 bash 脚本。清单3. 部署博客使用的脚本#!/bin/bash# 使用已部署文件初始化目标git clone –depth 1 –branch=master https://github.com/wololock/wololock.github.io.git .deploy_gitcd .deploy_git＃从 ../public/ 复制之前删除所有文件# 这样 git 可以跟踪上次提交中删除的文件find . -path ./.git -prune -o -exec rm -rf {} ; 2> /dev/nullcd ../# 部署hexo cleanhexo deploy这个脚本完全按照它在注释中所说的那样做：它将 master 分支从远程存储库克隆到 .deploy_git 以获取现有提交历史记录。然后它从 .deploy_git 中删除所有非 git 对象存储库文件，因此从 public 文件夹复制文件将跟踪已删除的文件。最后 - 它执行常规部署的 hexo deploy 命令。最后，这是在引入部署bash脚本后的部署配置部分：清单4. 当前的 Travis CI 部署配置deploy: skip_cleanup: true provider: script script: sh deploy.sh on: branch: develop由于这个解决方案，我能够保留站点更新的历史记录，并跟踪使用给定站点更新实际修改的文件的更改。最后的话我希望你发现这篇文章很有用。它描述了 Hexo + Travis CI + GitHub 用例的解决方案，但它可以解决从 CI 服务器环境运行时其他类似静态站点生成器可能遇到的问题。参考Documentation: https://hexo.io/docs/deploymenthttps://github.com/wololock/w… ...

前言博客有第三方平台，也可以自建，比较早的有博客园、CSDN，近几年新兴的也比较多诸如：WordPress、segmentFault、简书、掘金、知乎专栏、Github Page 等等。这次我要说的就是 Github Page + Hexo 搭建个人博客的方式！Github Page 是 Github 提供的一种免费的静态网页托管服务（所以想想免费的空间不用也挺浪费的哈哈哈），可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 编译静态资源，这次我们的主角就是 Hexo 了，具体的内容下面在文章内介绍。下面就开始吧~准备环境准备 node 和 git 环境，首先，安装 NodeJS，因为 Hexo 是基于 Node.js 驱动的一款博客框架，相比起前面提到过的 Jekyll 框架更快更简洁，因为天*朝网络被墙的原因尝试过安装 Jekyll 失败而放弃了。然后，安装 git，一个分布式版本控制系统，用于项目的版本控制管理，作者是 Linux 之父。如果 Git 还不熟悉可以参考廖雪峰大神的 Git 教程。两个工具不同的平台安装方法有所不一样，可自行了解按步骤安装，这里不详述了。安装成功后打开git bash（Windowns）或者终端（Mac），下方中将统一称为命令行。在命令行中输入相应命令验证是否成功，如果成功会有相应的版本号。git versionnode -vnpm -v安装 Hexo如果以上环境准备好了就可以使用 npm 开始安装 Hexo 了。也可查看 Hexo 的详细文档。在命令行输入执行以下命令：npm install -g hexo-cli安装 Hexo 完成后，再执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。hexo init myBlogcd myBlognpm install新建完成后，指定文件夹的目录如下：.├── _config.yml # 网站的配置信息，您可以在此配置大部分的参数。 ├── package.json├── scaffolds # 模版文件夹├── source # 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹| ├── _drafts # 草稿文件| └── _posts # 文章Markdowm文件 └── themes # 主题文件夹好了，如果上面的命令都没报错的话，就恭喜了，运行 hexo s 命令，其中 s 是 server 的缩写，在浏览器中输入 http://localhost:4000 回车就可以预览效果了。hexo s以下是我本地的预览效果，更换了 next 主题的，默认不是这个主题。至此，你本地的博客就已经搭建成功，接下来就是部署到 Github Page 了。注册 Github首先如果你还没有 Github 账号的先注册一个，具体过程如下点击 Start project 或者下面的 new repository 创建一个新的仓库注意点来了，Github 仅能使用一个同名仓库的代码托管一个静态站点，这个网上很多教程没说到的。然后打开仓库创建一个 index.html 文件，并随意先写点内容，比如 Hello World.这个时候打开 http://你的用户名.github.io 就可以看到你的站点啦，是不是很简单！index.html 内容只是暂时的预览效果，后面把 Hexo 的文件部署上去就可以在 http://你的用户名.github.io 看到你自己的博客啦！ 比如我的就是 http://webw3c.github.io 了。配置 SSH key要使用 git 工具首先要配置一下SSH key，为部署本地博客到 Github 做准备。打开命令行输入 cd ~/.ssh 如果没报错或者提示什么的说明就是以前生成过的，直接使用 cat ~/.ssh/id_rsa.pub 命令就是可以查看本机上的 SSH key 了。cat ~/.ssh/id_rsa.pub如果之前没有创建，则执行以下命令全局配置一下本地账户：git config –global user.name “用户名"git config –global user.email “邮箱地址"然后开始生成密钥 SSH keyssh-keygen -t rsa -C ‘上面的邮箱’按照提示完成三次回车，即可生成 ssh key。通过查看 ~/.ssh/id_rsa.pub 文件内容，获取到你的 SSH key（此图引用自码云）首次使用还需要确认并添加主机到本机SSH可信列表。若返回 Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 内容，则证明添加成功。ssh -T git@github.com 到这还没完，还要登录 Github 上添加刚刚生成的SSH key，按以下步骤添加：创建一个新的 SSH key, 标题随便，key 就填刚才生成那个，确认创建，搞定！！这样在你的 SSH keys 列表里就会看到你刚刚添加的密钥。部署到 Github此时，本地和Github的工作做得差不了，是时候把它们两个连接起来了。你也可以查看官网的部署教程。先不着急，部署之前还需要修改配置和安装部署插件。第一：打开项目根目录下的 _config.yml 配置文件配置参数。拉到文件末尾，填上如下配置（也可同时部署到多个仓库，后面再说）：第二：要安装一个部署插件 hexo-deployer-git。npm install hexo-deployer-git –save最后执行以下命令就可以部署上传啦，以下 g 是 generate 缩写，d 是 deploy 缩写：hexo g -d稍等一会，在浏览器访问网址： https://你的用户名.github.io 就会看到你的博客啦！！开始写作博客搭好了，就开始写文章了，这里简单介绍一下，详细的文档可以看 hexo 官网。新建文章，输入以下命令即可hexo new ‘文章标题’执行完成后可以在 /source/_posts 下看到一个“文章标题.md”的文章文件啦。.md 就是 Markdown 格式的文件，具体用法可以在网上找一下，语法还是比较简单的。在 Markdown 文章里面输入你的文章内容再执行一下以下命令hexo ghexo s就可以看到你的文章在博客显示了，以下就是刚刚最后，只要部署到你的 Github 上就可以了！hexo cleanhexo g -d部署前最好能先执行一下 hexo clean 命令，清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。另外，如果你的文章暂时不发布可以先保存在草稿里面。生成草稿的方法和文章差不多 hexo new draft “文章标题”，生成后会在 /source/_drafts 里看到你的草稿文章。当你想发布时只要执行 publish 命令即可发布到博客。hexo publish [layout] <filename>静态图床文章里用的一些图片放哪里比较好呢？比对了几个免费的图床七牛、sm.ms和微博图床，最后我决定选用微博的，七牛的好像最近是测试域名不能用了，虽然有解决方案，但怕以后还会有其他问题，所以放弃啦，毕竟免费的东西才是最贵的，特别像云储存这种东西，感觉都是钱钱钱，哈哈哈，万一有一天不让用就比较麻烦了，另外sm.ms这个口碑也不错，好像是个人开发的，免费好几年了，有同样的担心就放弃了，最好抱了新浪的大腿，感觉新浪应该会靠谱一点吧，唯一的问题就是如果有一天新浪禁止外链的话就不行了，再看吧。可以去chrome网上应用商店下载一个叫微博图床的chrome插件，下图是插件的界面，操作简单方便，具体使用看说明就可以啦，比较简单，这样图床的问题就解决了。主题配置你可以到官网主题页或者网上找你喜欢的，很多都不错，我使用的是 next 主题。你可以根据主题官网使用文档说明修改相应的配置，达到自己想要的效果。例如设置字体、开启打赏功能、添加评论系统、设置腾讯公益404页面、数据统计、内容分享等等功能。这里我说一下简单说一下我个人用到的一些配置。 一、添加评论系统 注意我现在已经改用 gitalk 啦，而下面是之前写的 valine 的教程，后面有空会更新或者增加这部分相应的内容，当然，如果你想使用的是 valine 可以继续参考下面的方法配置 添加 valine 评论系统，打开 /themes/next/_config.yml 文件，搜索 valine，开启 valine，设置 enable 为 true。然后到 leanCloud 登录或者注册 一个账号，注册后登录创建一个应用，然后进入应该到设置里面找到 AppId 和 AppKey 复制粘贴到主题配置文件里面对应的地方，就是上图中的 appid 和 appkey 这两个地方。 二、配置腾讯公益404页面 在博客根目录 /source 文件夹下创建404.html（具体内容见下图及代码）；在 html 上方加入上面3行代码；腾讯公益用到的js其实有有三个，search_children.js、data.js以及page.js，如果你的站点协议是 http 的话直接按照 next 文件的方法添加就可以了，但如果是 https 话直接添加是会报错的，因为腾讯公益404页面暂时还不支持 https，所以我直接把 page.js 的内容直接加入到页面是可以成功的，请看下图上图最前面的那几行也要加进去哦。layout: falsetitle: “404”—这里放一下上面用到的几个js链接，来自腾讯公益404官方接入文档<script type=“text/plain” src=“http://www.qq.com/404/search_children.js" charset=“utf-8” homePageUrl=“https://pojian.xyz” homePageName=“回到我的博客主页”></script><script src=“https://qzone.qq.com/gy/404/data.js" charset=“utf-8”></script><script src=“https://qzone.qq.com/gy/404/page.js" charset=“utf-8”></script>你也可以直接复制我 Github 上的404页面代码，以下是我博客的预览效果。另外如果需要自定义个性化404页面的只要删除相应腾讯的JS，直接修改上面的 404.html 文件就可以了。 三、添加字数统计和阅读时长 首先安装一个插件$ npm install hexo-symbols-count-time –save接着博客根目录下的配置文件里添加以下配置# 文章字数统计symbols_count_time: symbols: true time: true total_symbols: true total_time: true最后到 next 主题的配置文件下开启 symbols_count_time 字段重启一下 hexo 就可以看到效果啦 四、开启fancybox 打开主题配置文件搜索 fancybox 设置为 true，另外，vendors 填上对应 CDN 地址即可开启 五、文章分享 百度分享有个 https 的坑，按网上的方法把文件放到自己的服务器是我以前在其他的网站上测试过是能使用的，但在 hexo 中却报错了，具体不清楚是什么原因，感觉可能是 hexo 版本的问题，因为有的人可以，有的人报和我一样的错误，忘记截图了。因为这个功能也没有十分需要，就不继续爬了。换了 share.js 实现了同样的功能，具体可以看本文文末的效果。绑定域名如果你感觉直接使用 github.io 的域名作为你的博客链接不够专业，不够程序员的话那么就购买一个域名解析绑定到你的博客，我也比较建议这样做。我的是在阿里万网注册的，注册流程比较常规这里就不多详述了，注册登录控制台后找到你的域名，点右侧的解析按钮进去解析列表点右边的“添加记录”添加两条 CNAME 类型的记录，如上图，后面的记录值就填写你们自己的 Github 地址哈记录添加完后就要到 Github 设置绑定你购买的域名了，进入你的博客仓库点 Setting，然后拉到 GitHub Pages 那里填上你的申请购买的域名保存就可以了这里说下，当你点击保存的时候 Github Pages 会自动帮你生成一个 CNAME 的文件在根目录，里面的内容就是你绑定的域名地址注意，如果是按上面的方法操作还会有一点小问题，就是当你执行 hexo d 部署你本地的文章到 Github 时，你本地的文件会全部覆盖掉你现有仓库上的所有内容，包括 Github Pages 帮你创建的那个 CNAME 文件，这样的话当你访问域名的时候又会访问不到了。所以呢，你需要自己手动在本地根目录 /source 目录下手动创建一个 CNAME 文件，内容就是你的域名地址，因为 source 目录下的文件部署的时候是不会被删除的，所以部署的时候也会一起被部署上去，最后还需要重新到你仓库 Setting，拉到 GitHub Pages 那里再一次绑定你的域名，这样以后就没问题了。稍等一会就可以用你申请的域名就访问你的博客了！SEO优化接下来说下百度收录，据说 Github 屏蔽了百度的蜘蛛，也有的人说没，具体不是很清楚，Github 在2015的时候遭受了史上最大规模的DDoS攻击，有国外媒体指百度干的，具体不得而知啦，但感觉百度收录 Github 确认是比较难，时间也比较长，所以还是优化一下吧。一、代码同时部署到 coding那有什么方法呢？就是把博客站点同时托管在国内的 coding 平台上，这样收录就会容易很多，同时又不影响 Github 上的代码，coding 是国内的一个提供代码托管服务的平台，跟 Github 差不多。使用方法也和 Github 差不多，下面我就具体说一下怎么把代码同时部署到 coding 和 Github 上面，让百度更容易收录。注册、登录 coding 后创建一个新的仓库，注意点就是新建项目的时候命名规则和 Github 上的一样，就是 用户名.coding.me 可以看下图，还有记得别忘了添加 SSH key仓库建好后进入仓库，选左侧的 Page 服务，在设置中绑定新的域名，输入后点击绑定就可以了接着到你的域名解析控制台修改添加两条 CNAME 记录指向你的 Page 地址，看下图，注意看记录值哦，换成你自己的。最后呢修改根目录下的 _config.yml 配置文件中的部署配置，把 coding 的 git 地址添加进去就行了最后执行部署命令hexo cleanhexo g -d这时就可以在 coding 仓库中看到你提交部署的代码了，同时 你的用户名.coding.me 也可以访问你的博客站点了，这里 Github 和 coding 的代码是同时更新的，互不影响。而绑定的域名解析可能需要稍等一会才会生效。二、百度提交链接部署到 coding 后也不是百度就可以收录的，我们还需要继续优化。如果在百度搜索输入 site:你的域名 如果出现以下的效果证明就是网站还没被百度收录的，我们现在点下面的提交网址，进入百度站长工具提交。三、百度站长平台添加网站管理注册百度站长工具，并添加网站添加网站的过程有三步，主要操作集中在最后一步的网站验证方式里，我选择的是 HTML标签验证，按下面使用方法添加代码到你的网站即可而使用 next 主题的同学可以直接在主题的配置文件下搜索 baidu_site_verification 后面填上第三步中 meta 标签中 content 的值就可以最后点完成验证就可以通过了。四、添加sitemap站点地图站点地图包含了你网站上的站点链接，方便搜索引擎蜘蛛的抓取工作，搜索蜘蛛会通过网站地图中链接的深层次爬行，抓取新的内容。所以我们要生成 sitemap 文件助于网站优化，安装生成插件npm install hexo-generator-sitemap –savenpm install hexo-generator-baidu-sitemap –save接着在博客根目录下的配置文件里添加对应配置项# sitemapsitemap: path: sitemap.xmlbaidusitemap: path: baidusitemap.xml注意缩进，要不会编译报错还要修改一个根目录配置文件下的URL，url 一项的值改成你在百度站长平台里面添加的自己站点的地址，这样生成的 sitemap.xml 文件里的 url 才是你站点的地址，看下图五、添加蜘蛛协议robots.txt增加 robots.txt 文件，就是蜘蛛协议，新建 robots.txt 文件添加以下内容，把 robots.txt 放在 /source 文件下，我们前面说过 /source 目录下的文件是会被打包上传的。# hexo robots.txtUser-agent: *Allow: /Allow: /archives/Disallow: /vendors/Disallow: /js/Disallow: /css/Disallow: /fonts/Disallow: /vendors/Disallow: /fancybox/Sitemap: https://pojian.xyz/sitemap.xmlSitemap: https://pojian.xyz/baidusitemap.xmlAllow后面的就是你的menu，还有最下面的 Sitemap 地址请自行改成你们自己的地址完成后，重启hexo，执行 hexo g -d 重新生成文件并提交后，在public目录下会生成对应的xml文件。可以通过 http://xxx.com/sitemap.xml 和 http://xxx.com/baidusitemap.xml 访问到 sitemap 文件，通过 http://xxx.com/robots.txt 访问到 robots.txt 文件。可以到百度站长检测一下 robots.txt 文件是否生效六、自动推送百度有自动推送、主动推送、sitemap、手动提交几种方式。自动推送是轻量级链接提交组件，将自动推送的JS代码放置在站点每一个页面源代码中，当页面被访问时，页面链接会自动推送给百度，有利于新页面更快被百度发现。怎么安装呢？如果你的是 next 主题，只要打开主题配置文件搜索找到 baidu_push 设置为 true 即可如果你使用的不是 next 主题，也可以手动把以下代码粘贴到你的站点，一般放在 head 头部公共文件里面<script>(function(){ var bp = document.createElement(‘script’); var curProtocol = window.location.protocol.split(’:’)[0]; if (curProtocol === ‘https’) { bp.src = ‘https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = ‘http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName(“script”)[0]; s.parentNode.insertBefore(bp, s);})();</script>七、主动推送这里利用一个第三方插件 hexo-baidu-url-submit 进行主动推送安装npm install hexo-baidu-url-submit –save添加想关配置到根目录下的配置文件里# 百度链接提交-主动推送配置baidu_url_submit: count: 3 ## 提交最新的一个链接 host: pojian.xyz ## 在百度站长平台中注册的域名 token: 3GIEYsuq5ZTkvDBm ## 请注意这是您的秘钥，所以请不要把博客源代码发布在公众仓库里! path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里添加新的部署配置，注意这里跟之前有点不一样，要在 type 前添加一个破折号 -deploy: - type: git repo: github: https://github.com/webw3c/webw3c.github.io.git coding: https://git.dev.tencent.com/yusting/yusting.coding.me.git - type: baidu_url_submitter最后，执行 hexo deploy 的时候，新的连接就会被推送了。 实现原理 新链接的产生， hexo generate 会产生一个文本文件，里面包含最新的链接新链接的提交， hexo deploy 会从上述文件中读取链接，提交至百度搜索引擎八、手动推送就是直接直接把你需要提交的链接直接使用手动的方式填写提交就可以。最后你可以看到是否已经被百度成功收录了如果抓取成功了就证明已经被收录了，好像一般不会这么快，我的等了两天左右才抓取得到。九、添加百度统计添加百度统计就可以查看你网站相关的一些数据，便于你自己的站点多端同步写作内容准备中…手机编写网上好像找不到什么资料，不过通过在手机端安装 SSH 客户端远程操作服务器端，安装配置 node / git / hexo 环境编写应该可以的，原理同多台电脑编写差不多，不过这样做不太省心，不折腾了哈。结语文章到这差不多啦！后续有些小点深入学习后还是会保持更新的，希望文章对曾经像我一样的小白有那么一点帮助，技术有限，难免有纰漏，欢迎指正批评和讨论，感谢阅读！:-) ...

EasyHexo???? 轻松使用 Hexo 搭建你的博客EasyHexo GitHub Repo???? EasyHexo/Easy-Hexo本篇作者：yi-yun前言这篇文章并没有划定适宜人群，只是希望你可以通过此篇教程找到适合你的配置，或者通过我的博客找到一些灵感。这就是这篇教程的意义。另外，需要说明的是，我的博客使用的主题是 Next 6.3 版本。学习之前，还希望你能先学一点 Yaml 基础知识 以及 Stylus 基础知识。不会的话多动手也可以做到，并不需要熟练掌握。约定一般提供方法，且按步骤。如果修改方法很多，我会以 • 方式区分仔细看清站点配置文件和主题配置文件博客文件目录为 root 目录，即包括你的 themes/ 、source/ 等文件夹的博客根目录。效果图在每个教程最开头。（大部分都有，逃个性化配置修改打赏文字抖动个人不喜欢这个设计所以改了修改文件 themes\next\source\css_common\components\post\post-reward.styl，将 hover 注释即可可以在 themes\next\source\css_custom\custom.styl 中添加重叠样式（推荐）//二维码不抖动#wechat:hover p, #alipay:hover p { animation: none;}修改打赏按钮在 themes\next\source\css_custom\custom.styl 中添加代码//打赏按钮修改#rewardButton span { height: 35px; width: 35px; //line-height:30px; font-size: 15px; font-family: “PingFang SC”, “Microsoft YaHei”, Georgia, sans-serif; background: #34495e; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: 0.2s ease-out; &:hover { background: #649ab6; -webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); -moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }}修改 themes\next\languages\zh-CN.yml 文件，将打赏字样改为reward:donate: <i class=“fa fa-qrcode fa-2x” style=“line-height:35px;"></i>wechatpay: 微信支付alipay: 支付宝PS: 这里语言文件的名字跟不同主题有关系，有可能不是 zh-CN.yml 修改 busuanzi 统计功能主题配置文件中搜索 busuanzi 增加busuanzi_count:enable: truesite_uv: true #total visitorssite_uv_icon: usersite_uv_header: 访问用户：site_uv_footer: 人site_pv: true #total viewssite_pv_icon: eyesite_pv_header: 访问次数：site_pv_footer: 次post_views: truepost_views_icon: eyethemes\next\layout_third-party\analytics\busuanzi-counter 变更为<i class=“fa fa-{{ theme.busuanzi_count.site_uv_icon }}"></i>&nbsp {{ theme.busuanzi_count.site_uv_header }} <span class=“busuanzi-value” id=“busuanzi_value_site_uv”></span> {{ theme.busuanzi_count.site_uv_footer }} <i class=“fa fa-{{ theme.busuanzi_count.site_pv_icon }}"></i>&nbsp {{ theme.busuanzi_count.site_pv_header }} <span class=“busuanzi-value” id=“busuanzi_value_site_pv”></span> {{ theme.busuanzi_count.site_pv_footer }}PS: busuanzi 因为在 2018.10.12 左右七牛云域名过期，导致无法显示人数，如果你的主题是旧版本，请在第二步的文件中更新为 src=”//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"给文章底部加星星（点赞）虽然是异步，但访问速度太慢，经常加载不出来在主题配置文件中搜索 rating 即可点击此链接注册账号，设置站点后，点击左侧设置， site 建议选私人，rate 选择颜色保存即可复制 ID 到配置文件，选择颜色添加代码，搜索 rating，对比代码 {% if theme.rating.enable %} <div class=“wp_rating”>+ <div style=“color: rgba(0, 0, 0, 0.75); font-size:13px; letter-spacing:3px”>(&gt;看完记得五星好评哦&lt;)</div> <div id=“wpac-rating”></div> </div> {% endif %}修改文章底部留白 添加如下代码：.post-widgets { padding-top: 0px;} .post-nav { margin-top: 30px;}### 侧边栏近期文章原理：去除友链，将友链换成近期文章1. 添加如下代码：{% if theme.recent_posts %} <div class=“links-of-blogroll motion-element {{ “links-of-blogroll-” + theme.recent_posts_layout }}"> <div class=“links-of-blogroll-title”> <i class=“fa fa-history fa-{{ theme.recent_posts_icon | lower }}” aria-hidden=“true”></i> {{ theme.recent_posts_title }} </div> <ul class=“links-of-blogroll-list”> {% set posts = site.posts.sort(’-date’) %} {% for post in posts.slice(‘0’, ‘5’) %} <li> <a href=”{{ url_for(post.path) }}” title=”{{ post.title }}" target="_blank">{{ post.title }}</a> </li> {% endfor %} </ul> </div>{% endif %}```在主题配置文件中配置recent_posts_title: 近期文章recent_posts_layout: blockrecent_posts: true复制文本添加版权信息在 themes\next\source\js\src 新建 copy.js，代码如下：function addLink() { var body_element = document.body; var selection; selection = window.getSelection(); if (window.clipboardData) { // Internet Explorer var pagelink ="\r\n\r\n 原文出自 Yi-Yun博客 \n除特别声明外，均采用CC BY-NC-SA 4.0许可协议\n转载请保留原文链接: “+document.location.href+”"; var copytext = selection + pagelink; window.clipboardData.setData (“Text”, copytext); return false; } else { var pagelink = “<br/>原文出自 Yi-Yun博客 <br/>除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议<br/>转载请保留原文链接: “+document.location.href+””; var copytext = selection + “<br/>"+pagelink; var newdiv = document.createElement(‘div’); newdiv.style.position=‘absolute’; newdiv.style.left=’-99999px’; body_element.appendChild(newdiv); newdiv.innerHTML = copytext; selection.selectAllChildren(newdiv); window.setTimeout(function() { body_element.removeChild(newdiv);},0); } } document.oncopy = addLink;在 next\layout_layout.swig 文件中，添加引用（注：在 swig 文件末尾添加）：<script type=“text/javascript” src="/js/src/copy.js”></script>添加 DaoVioce很多灵感都是逛博客获得的注册首先在 DaoVoice 注册个账号，点击->邀请码是 cbaf2df2。获取 app_id点击左侧应用设置->安装到网站在代码中找到 app_id修改 head.swig在 themes\next\layout_custom\head.swig 添加如下代码{% if theme.daovoice %} <script> (function(i,s,o,g,r,a,m){i[“DaoVoiceObject”]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset=“utf-8”;m.parentNode.insertBefore(a,m)})(window,document,“script”,(‘https:’ == document.location.protocol ? ‘https:’ : ‘http:’) + “//widget.daovoice.io/widget/0f81ff2f.js”,“daovoice”) daovoice(‘init’, { app_id: “{{theme.daovoice_app_id}}” }); daovoice(‘update’); </script>{% endif %}修改主题配置文件文件末尾添加如下代码# Online contactdaovoice: truedaovoice_app_id: # 这里填你刚才获得的 app_id至此，网页的在线联系功能已经完成，hexo s 可查看页面，窗口和位置可自行配置聊天窗口配置我的配置绑定微信在用户界面点击右上角头像即可扫码绑定，即时通信可在微信小程序中添加吉祥物安装依赖npm install –save hexo-helper-live2dnpm install –save live2d-widget-model-wanko站点配置# hexo-helper-live2d配置，参考https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.mdlive2d:enable: truescriptFrom: localpluginRootPath: live2dw/pluginJsPath: lib/pluginModelPath: assets/tagMode: falsedebug: falsemodel: scale: 1 use: live2d-widget-model-wankodisplay: superSample: 2 # 超采样等级 width: 100 height: 100 position: left # 位置mobile: show: falsereact: opacityDefault: 0.9 # 默认透明度 opacityOnHover: 0.5 # 鼠标移上透明度网页标题崩溃欺骗添加 JavaScript 代码 在 themes\next\source\js\src 文件夹下创建 crash_cheat.js，添加代码：var OriginTitle = document.title;var titleTime;document.addEventListener(‘visibilitychange’, function () { if (document.hidden) { $(’[rel=“icon”]’).attr(‘href’, “/img/TEP.ico”); document.title = ‘╭(°A°`)╮ 页面崩溃啦 ~’; clearTimeout(titleTime); } else { $(’[rel=“icon”]’).attr(‘href’, “/favicon.ico”); document.title = ‘(><) 噫又好了~’ + OriginTitle; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); }});引用 在themes\next\layout_layout.swig文件中，添加引用（注：在swig末尾添加）：<script type=“text/javascript” src="/js/src/crash_cheat.js"></script>文末添加结束标记修改 themes\next\layout_macro\passage-end-tag.swig 文件<div> {% if not is_index %} <div style=“text-align:center;color: #ccc;font-size:14px;">————-本文结束<i class=“fa fa-paw”></i>感谢您的阅读————-</div> {% endif %}</div>修改网页底部的桃心更改主题配置文件中的图标名字即可icon: name: user animated: true color: “#808080"透明找到自己相应的 Scheme 下的相关文件，我的是 Pisces。themes\next\source\css_schemes\Pisces_layout.styl背景.content-wrap- 菜单栏 .header-innerthemes\next\source\css_schemes\Pisces_sidebar.styl侧边栏.sidebar-inner找到 background属性更改为 background: rgba(255,255,255,0.7) 即为透明度30%的白色更改 sidebar 大小找到 themes\next\source\js\src\util.jsfunction updateSidebarHeight(height) { height = height || ‘auto’; $(’.site-overview, .post-toc’).css(‘max-height’, height); }可在 height 后加50底部加上运行时间在 hexo/themes/[your theme]/layout 文件夹下找到你的 footer 文件<span id=“timeDate”>载入天数…</span><span id=“times”>载入时分秒…</span> <script> var now = new Date(); function createtime() { var grt= new Date(“02/14/2018 12:49:00”); //此处修改你的建站时间或者网站上线时间 now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ){ hnum = “0” + hnum; } minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ) { mnum = “0” + mnum; } seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ){snum = “0” + snum;} document.getElementById(“timeDate”).innerHTML = “本站已安全运行 “+dnum+” 天 “; document.getElementById(“times”).innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒”;} setInterval(“createtime()",250); </script>鼠标爆炸特效下载这个脚本，放在 themes/next/source/js/src修改代码{% if theme.fireworks %}<canvas class=“fireworks” style=“position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;” ></canvas> <script type=“text/javascript” src=”//cdn.bootcss.com/animejs/2.2.0/anime.min.js”></script> <script type=“text/javascript” src="/js/src/fireworks.js”></script>{% endif %}打开主题配置文件，在里面最后写下：fireworks: trueSEO 优化看个人喜好修改，不一定要改的一模一样首页 title 优化更改 index.swig 文件 your-hexo-site\themes\next\layout{% block title %} {{ config.title }} {% endblock %}{% block title %} {{ theme.keywords }} - {{ config.title }}{{ theme.description }} {% endblock %}{% block title %}{{ theme.description }}-{{ title }}{% if theme.index_with_subtitle and subtitle %} – {{ subtitle }}{% endif %}{% endblock %}修改文章链接编辑站点配置文件，修改其中的 permalink 字段改为 permalink: :title.html 即可。添加 “nofollow” 标签修改代码{{ __(‘footer.powered’, ‘<a class=“theme-link” href=“http://hexo.io” rel=“external nofollow”>Hexo</a>’) }}<a class=“theme-link” href=“https://github.com/iissnan/hexo-theme-next" rel=“external nofollow”>同理，sidebar.swig也作如下修改<a href=“http://creativecommons.org/licenses/{{ theme.creative_commons }}/4.0” class=“cc-opacity” target="_blank” rel=“external nofollow”><a href=”{{ link }}" target="_blank" rel=“external nofollow”>{{ name }}</a>推荐工具Visual Studio Code - 重新定义代码方式！博客图床解决方案Typora - 所见即所得的 Markdown 编辑器参考链接很久以前的事情了…有些参考链接找不到了，而且找不到原创…打造个性超赞博客 Hexo+NexT+GitHub Pages 的超深度优化Hexo NexT 博客增加知乎豆瓣图标支持好了，本文就到这里。如果对 Hexo 有什么疑问，欢迎在评论区中提问，我会尽力回答。或者你也可以选择更优秀的方式 issue 提问！如果你想学学 Hexo，可以到 EasyHexo 学习。谢谢大家！???????????? ...

本文首发于：https://y0ngb1n.github.io/a/5…什么是 Travis CI？Travis CI 是在软件开发领域中的一个在线的，分布式的持续集成服务，用来构建及测试在 GitHub 托管的代码。这个软件的代码同时也是开源的，可以在 GitHub 上下载到，尽管开发者当前并不推荐在闭源项目中单独使用它。它提供了多种编程语言的支持，包括 Ruby、JavaScript、Java、Scala、PHP、Haskell 和 Erlang 在内的多种语言。许多知名的开源项目使用它来在每次提交的时候进行构建测试，比如 Ruby on Rails，Ruby 和 Node.js。目前 Travis CI 两个站点，提供不同的服务：版本主页特色免费版https://travis-ci.org/为开源项目提供免费服务收费版https://travis-ci.com/可以部署 GitHub 私有仓库两个站点只能看到各自的项目，不能通用，按需选用。准备工作首先，访问官方网站 travis-ci.org，点击右上角的登入按钮，使用 GitHub 账户登入 Travis CI。Travis 会列出 GitHub 上面你的所有仓库，以及你所属于的组织。此时，选择你需要 Travis 帮你构建的仓库，打开仓库旁边的开关。一旦激活了一个仓库，Travis 会监听这个仓库的所有变化。<p align=“center”> <img src=“https://i.loli.net/2019/01/17...; alt=“travis github repo”></p>.travis.ymlTravis 要求项目的根目录下面，必须有一个 .travis.yml 文件。这是配置文件，指定了 Travis 的行为。该文件必须保存在 GitHub 仓库里面，一旦代码仓库有新的 Commit，Travis 就会去找这个文件，执行里面的命令。.travis.yml：language: node_js # 指定语言环境node_js: ‘8.9.3’ # 指定 NodeJS 版本cache: npm # 指定 npm 缓存方案，会缓存 $HOME/.npm 或 node_modules 文件夹dist: trusty # 指定系统版本，trusty 是指 Ubuntu 14.04 发行版的名称sudo: required # 是否需要 sudo 权限branches: # 指定要构建的分支 only: # only 表示只构建以下分支 - sourcebefore_install: # install 阶段之前执行 - npm install -g hexo-cli # 全局安装 Hexo 命令行工具install: # 在安装项目环境阶段需要运行的命令，一条一行，类似的还有 before_install - npm install # 安装 package.json 中的依赖script: # 在构建阶段需要运行的命令，一条一行，类似的还有 before_script、after_script - hexo clean - hexo generate # Hexo 常规命令，执行清理和生成after_success: # script 阶段成功时执行，构建失败不会执行，其他同上 - git config –local user.name “travis-ci” - git config –local user.email “deploy@travis-ci.org” - sed -i’’ “s~git@github.com:https://${GITHUB_REPO_TOKEN}@github.com/” _config.yml - hexo deploy > /dev/null # 通过 Hexo 的 deploy 命令部署博客更多使用技巧请主动参考「持续集成服务 Travis CI 教程」。那么，现在又有一个问题了：我们的目是自动部署到 GitHub Pages，用的是 hexo deploy 命令，但是 Hexo 又配置使用的是 Git push 来推送的（由 hexo-deployer-git 插件提供技术支持），那么 Travis CI 怎么有权限操作我的 GitHub 仓库呢！GitHub Access Token以下内容摘抄「使用 Travis 自动构建 Hexo 到 GitHub」GitHub 允许你通过设置页面添加一个「个人访问令牌（Personal access tokens）」，使用 Assess Token 将有权限通过 https 访问 GitHub Api 操作自己的仓库，可见这个就是我们需要的。现在我们来添加一个 token，先进入自己 GitHub 的设置页面，点击 Personal access tokens → Generate new token 按钮，新建一个 token。在权限设置中，我们只需要操作仓库，因此只需要打开仓库相关的权限就够了，权限开放应该满足最小原则，能少就少。设置好权限后点击生成按钮就会生成完毕并跳到 tokens 列表。现在就需要把刚生成的 Access Token 的值复制下来，注意，这个页面一旦刷新过了， token 就不能再显示了，没记住的只能重新生成一个了。嗯，现在 Access Token 也有了，能操作仓库了，那么，这个 token 应该放到哪里呢？肯定不是放到代码里。。。其实在 Travis CI 的项目设置界面就有提供设置环境变量，我们就应该把 token 放到那里。回到我们 Travis CI 的博客项目设置页面中，添加一个名为 GITHUB_REPO_TOKEN 的环境变量储存我们的 token，并记得要设置 Display value in build log 为 OFF，关闭变量的显示，否则等于公开了 token。现在在我们的执行脚本中就能使用 $GITHUB_REPO_TOKEN 访问 token 的环境变量了~然后就是如何使用了。在 Hexo 部署前，我们应该把原来的部署仓库地址用带有 Access Token 的地址替换掉，于是在 .travis.yml 的 hexo deploy 命令前增加一条命令：sed -i’’ “s~git@github.com:https://${GITHUB_REPO_TOKEN}@github.com/” _config.yml这样，在执行时，这条命令就能自动替换到有权限操作的 token 地址了，并且也不会泄露或者影响本地的原始配置文件。构建失败：子模块拉取失败本博客的第三方主题使用 git submodule 管理，可以翻看「Hexo 搭建个人博客 #04 主题的安装与自定义样式」详细的构建日志可见 #1，下面提取关键信息：$ git submodule update –init –recursiveSubmodule ’themes/skapp’ (git@github.com:Mrminfive/hexo-theme-skapp.git) registered for path ’themes/skapp’Cloning into ‘/home/travis/build/y0ngb1n/y0ngb1n.github.io/themes/skapp’…Warning: Permanently added the RSA host key for IP address ‘192.30.253.113’ to the list of known hosts.Permission denied (publickey).fatal: Could not read from remote repository.Travis CI 官方是默认支持 Git Submodules，在拉取仓库时会默认拉取子模块的仓库，可以手动关闭该特性。由于在使用 git submodule 时，添加了 git@github.com 的仓库地址，使用 SSH 的协议，所以拉取失败了，下面提供两个解决方案：Adding to SSH Known Hosts - 官方提供的解决方案手动修改 .gitmodules 里配置的仓库地址，将使用 git 协议的仓库链接改为 https 协议我这使用方案 2，修改为https 协议：[submodule “themes/skapp”] path = themes/skapp url = https://github.com/Mrminfive/hexo-theme-skapp.git将修改推送至 GitHub 后，Travis CI 会进行构建，此时可见 #2 成功构建了。在 README 中查看构建状态我们可以在 README 中添加 Travis CI 的构建状态，这样便可方便地查看项目在 Travis CI 上的构建状态。—— Embedding Status Images、Shields.io参考资料Travis CI Tutorial - @Travis CI Docs持续集成服务 Travis CI 教程 - @阮一峰Travis CI 持续集成 GitHub 个人博客 - @路家豪使用 Travis 自动构建 Hexo 到 GitHub - @zthxxx开箱即用，Hexo 博客的 github+server 自动部署 - @伍酱用 Travis CI 自动部署 Hexo 博客 - @Karl使用 Travis CI 自动部署 Hexo 博客 - @wshunliHexo 遇上 Travis-CI：可能是最通俗易懂的自动发布博客图文教程 - @MichaelXHexo+Github+Travis-ci 搭建程序员自己的博客 - @baiyangliu ...

本文重点介绍Linux deepin下开发hexo 搭配next、GiteePages，免费轻松实现高质量高颜值博客。其他系统的方法大同小异，只是环境配置略有不同，只要有git和npm环境便可轻松入门hexo。最终效果: https://tczmh.gitee.io/hexodemo/一、安装先安装git npm依赖sudo apt install gitsudo apt install npm初始化hexo init blogcd blognpm install启动hexo server打开浏览器访问 http://localhost:4000即可看到第一个hexo页面二、主题换主题 ( 位置还是在blog文件夹内 Linux下默认位置是 /usr/lib/blog )git clone https://github.com/iissnan/hexo-theme-next themes/next配置文件vim _config.ymltheme: landscape 改为 theme: next# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next部署 重启hexo g -dhexo s效果如图三、发文章发表文章hexo new post “初识hexo"编辑文章vim /usr/lib/blog/source/_posts/初识hexo.md修改内容，语法为markdown(语法问题，所有的 被我替换成了 . 使用的时候要替换回来)---title: testdate: 2019-01-17 09:27:29tags: test---## start----**这是加粗的文字***这是倾斜的文字*这是斜体加粗的文字这是加删除线的文字—-—-<a href=“https://www.jianshu.com/u/1f5ac0cf6a8b" target="_blank”>简书</a>—-姓名|技能|排行–|:–:|–:刘备|哭|大哥关羽|打|二哥张飞|骂|三弟—-…javascript function clean(){ alert(“已完成!”); }…—-…flowst=>start: 开始e=>end: 结束op=>operation: 我的操作cond=>condition: 确认？st->op->condcond(yes)->econd(no)->op…—-##end部署 重启hexo g -dhexo s效果如下https://tczmh.gitee.io/hexodemo/2019/01/17/demo/四、部署线上避坑指南：用户名之后会用来作为二级域名例子:若 用户名为qiaofeng那么 就可以获得一个免费的个人线上地址qiaofeng.gitee.io若 新建项目的时候，项目名如果是blog那么 访问地址就是https://qiaofeng.gitee.io/blog/若项目名与用户名相同也叫qiaofeng那么 可以直接访问二级域名访问 https://qiaofeng.gitee.io 而省略项目名先注册码云(https://gitee.com)，新建项目(截图省略)打开【服务】 - 【Gitee Pages】勾选【强制使用 HTTPS】点击【启动】看到“已开启 Gitee Pages 服务，网站地址： https://tczmh.gitee.io/hexodemo” 即可回到本地，修改配置文件vim _config.yml中间修改(这里的url是刚才开启Gitee Pages 服务出现的url，root必须是gitee新建的项目名，如果最后出现读不到js css，显示混乱等问题，就是这一步不对)url: https://tczmh.gitee.io/hexodemoroot: /hexodemo结尾修改deploy: type: git repo: https://gitee.com/tczmh/hexodemo.git branch: master其中repo填写gitee上获得的git地址，在【项目详情】 - 【克隆/下载】 - 【复制】安装依赖npm install hexo-deployer-git –save设置全局git (若邮箱和用户名不知道，可以在gitee的个人设置页面查看)git config –global user.email “你的邮箱"git config –global user.name “你的用户名"清理&更新&部署一条龙命令 (可能需要输入账号密码，就输gitee登录的即可)hexo clean && hexo g && hexo d看到以下内容说明成功remote: Powered By Gitee.com To https://gitee.com/tczmh/hexodemo.git + cfcc494…395648d HEAD -> master (forced update)分支 ‘master’ 设置为跟踪来自 ‘https://gitee.com/tczmh/hexodemo.git' 的远程分支 ‘master’。INFO Deploy done: git访问地址：https://tczmh.gitee.io/hexodemo和本地测试的一样大功告成！之后只需要修改本地配置文件来配置博客，发表文章更多功能访问官方文档https://hexo.io/zh-cn/docs/http://theme-next.iissnan.com/getting-started.html补充一下生成二维码方法(因为开启HTTPS 所以直接支持 微信扫一扫 微信长按二维码识别等)https://cli.im/输入【URL】点击【生成】即可主要就是这些，都是一些基本入门的东西，深入研究可以说是其乐无穷。本篇内容也可以查看我的个人博客:https://zzzmh.cn/single?id=54 ...

七牛云测试域名过期后如何备份文件之前很多人都会使用【七牛云】作为图床，非常方便，但是后来七牛云政策做了修改，测试域名只有30个自然日的试用期，到期将自动回收。导致存储空间中文件或图片既不能外链下载，也无法从七牛云的控制台下载或预览，因此很多博客中的图片无法显示。如果想要继续正常使用的话，需要绑定完成 ICP 备案的域名才可以，但是进行 ICP 备案，还需要一台国内主机，及一系列的手续，产生了不必要的费用及麻烦。那么如何将失效存储空间中的文件或图片下载下来呢？本篇将告诉你方法。一、使用自定义域名如果您有一个完成 ICP 备案的域名，可以与失效存储空间进行绑定，绑定之后可以继续使用，也可以将文件或图片下载下来进行备份。此方法在此不再赘述。二、使用 qshell 备份文件除了绑定自定义域名进行备份外，我们还可以通过 qshell 工具进行文件的备份。qshell 工具是七牛云官方提供得，方便开发者测试和使用七牛云API的一个命令行工具。qshell 官方文档qshell Github地址快速模式# 在同存储区域内创建一个新的存储空间# 账号赋权./qshell.exe account <AccessKey> <SecretKey> <Name># 获取失效存储空间的文件列表./qshell.exe listbucket bucketError -o list.txt# 处理文件，仅获取第一列文件名cat list.txt | awk ‘{print $1}’ >list_final.txt# 将失效存储空间的文件复制到新的存储空间./qshell.exe batchcopy –force –overwrite bucketError bucketNew -i list_final.txt# 下载文件./qshell.exe qdownload download.conf2.1 在七牛云控制台新建空间使用浏览器进入七牛云控制台，在对象存储中新建一个存储空间，此存储空间需要与失效的存储空间在同一个【存储区域】上（比如都在华东，不在同一存储区域无法拷贝）。此存储空间被用来将失效存储空间中的文件复制进去，因为新建的存储空间有一个可以使用30天的测试域名，所以可以从这个新建的存储空间中将原来的文件下载下来进行备份。2.2 安装 qshell 工具qshell 工具下载地址为：http://devtools.qiniu.com/qshell-v2.3.5.zip下载完成后解压，将会得到对应三种操作系统的程序。|-qshell-v2.3.5 |-qshell_darwin_x64 |-qshell_linux_arm |-qshell_linux_x64 |-qshell_linux_x86 |-qshell_windows_x64.exe |-qshell_windows_x86.exe如果你是 Windows 系统的话，那么你应该使用 qshell_windows_x64.exe 这个程序，因为这是一个命令行工具，所以双击打开会闪退，应该在命令行中操作。为了简化命令，可将其重命名为 qshell.exe ，命令使用形式如下：# CMD 命令格式qshell.exe 命令 参数# Git Bash 等类 Linux 终端命令格式./qshell.exe 命令 参数2.3 设置账号密钥想要使用 qshell 操作七牛空间，需要添加账户密钥 AccessKey 和 SecretKey, 赋予 qshell 权限。# qshell-2.3.5 版本命令./qshell.exe account <AccessKey> <SecretKey> <Name># qshell-2.2.0 版本命令./qshell.exe account <AccessKey> <SecretKey>AccessKey, SecretKey 两个参数可以从七牛云-密钥管理中获取。Name是用户可以任意取的名字，表示当前在本地记录的账户的名称，和在七牛注册的邮箱信息没有关系。注：qshell-2.2.0 版本 与 qshell-2.3.5 版本 命令上稍有差异。qshell account 命令文档2.4 复制失效存储空间文件至新存储空间假设失效存储空间名为：bucketError假设新建存储空间名为：bucketNew若想要将失效存储空间的文件复制到新的存储空间，首先需要获取失效存储空间的文件列表，使用 listbucket 命令进行文件列表的导出。获取到文件列表后，使用 batchcopy 命令将 bucketError 中的文件全部复制到 bucketNew 中。(1) 使用 listbucket 导出文件列表# qshell-2.3.5 版本命令./qshell.exe listbucket bucketError -o list.txt# qshell-2.2.0 版本命令./qshell.exe listbucket bucketError list.txtlist.txt 文件结构如下：Hexo.png 33446 Fmmc-_RoRE19Gy86M_p3sEqt-Ue3 15475323542679537 image/png 0atom.xml 249682 FhtSZviyys9iSIMyPBmuohWEJDcE 15475323543559808 application/xml 0favicon.ico 4286 FiXUxb856CirSyQ78t3VQNQmCIZO 15475323543881185 image/x-icon 0ssh_rsa.png 17895 FsImghWkk55vj06DIt6DAhhLzAxQ 15475323564546303 image/png 0qshell listbucket 命令文档(2) 修改文件列表结构这里需要修改文件，只保留第一列的文件名，可以用awk获取list文件的第一列，不然无法进行复制。cat list.txt | awk ‘{print $1}’ >list_final.txtwindows 系统中CMD无法使用上面的命令，可以使用 Git Bash 终端或手动修改文件。 list_final.txt 文件结构如下：Hexo.pngatom.xmlfavicon.icossh_rsa.png(3) 复制文件到新存储空间获取到需要的文件列表 - list_final.txt 后，就可以进行文件的复制了。使用 batchcopy 命令进行复制。文件复制方向： bucketError -> bucketNew 。# qshell-2.3.5 版本命令./qshell.exe batchcopy –force –overwrite bucketError bucketNew -i list_final.txt# qshell-2.2.0 版本命令./qshell.exe batchcopy –force –overwrite bucketError bucketNew list_final.txtforce : 没有此选项，需要输入验证码，加入此项则不需要输入。overwrite ：如果批量复制的文件列表中存在目标空间已有同名文件的情况，针对该文件的复制会失败，如果希望能够强制覆盖目标文件，那么可以使用-overwrite选项。qshell batchcopy 命令文档2.5 下载新存储空间的文件使用 qdownload 命令可以将存储空间中的文件下载到本地。但是该功能默认需要收取流量费用，如果想要免费下载，还需进行以下配置。(1) 配置 download.conf在 qshell 目录下创建新文件 download.conf ，并将以下信息添加进去。{ “dest_dir” : “D:\Images\”, “bucket” : “bucketNew”, “cdn_domain” : “xxxxxx.bkt.clouddn.com”}参数名描述dest_dir本地数据备份路径，为全路径，并且文件夹需要事先创建好，不然无法下载bucket空间名称cdn_domain设置下载的CDN域名，此处为新建空间的测试域名。默认为空表示从存储源站下载，需支付源站流量费用，无法减免！！！备注：在Windows系统下面使用的时候，注意dest_dir的设置遵循D:\jemy\backup这种方式。也就是路径里面的要有两个（\）。在默认不指定cdn_domain的情况下，会从存储源站下载资源，这部分下载产生的流量会生成存储源站下载流量的计费，请注意，这部分计费不在七牛CDN免费10G流量覆盖范围。(2) 文件下载配置好文件之后，可以使用下面的命令进行文件下载：# qshell-2.2.0 与 qshell-2.3.5 版本命令相同./qshell.exe qdownload download.conf下载完成后可以在对应的文件夹中查看下载的文件。不管是备份，还是更换图床都是可以的了。qshell qdownload 命令文档三、参考七牛云 qshell 官方文档qshell Github地址Github 中关于此问题的issues点击阅读原文 ...

准备1、 一台主机 我的是阿里云（CentOS系统）2、 node.js可以参照我这篇文章搭建环境https://segmentfault.com/a/11…3、 git 安装后查看版本正常输出代表安装成功$ sudo yum install git-core$ git –versiongit version 1.8.3.1Hexo 安装$ npm install -g hexo-cli$ hexo versionhexo-cli: 1.1.0os: Linux 3.10.0-693.2.2.el7.x86_64 linux x64http_parser: 2.7.0node: 9.3.0v8: 6.2.414.46-node.15uv: 1.18.0zlib: 1.2.11ares: 1.13.0modules: 59nghttp2: 1.25.0openssl: 1.0.2nicu: 60.1unicode: 10.0cldr: 32.0tz: 2017c新建博客1、 建立文件夹$ hexo init blog2、安装$ cd blog$ npm install3、 生成静态页面$ hexo g4、 启动hexo博客$ hexo s更换hexo主题1、 下载next主题$ cd /home/blog/theme$ git clone https://github.com/iissnan/hexo-theme-next themes/next2、 配置hexo主题（_config.yml）主要是配置theme选项，其他配置可以自行参考hexo官网theme: hexo-theme-next更换主题后重新生成静态文件然后启动$ hexo g$ hexo s

Hexo + Github + 语雀 + yuque-hexo +travis-ci+severless 打造全自动持续集成个人博客，云端写作，自动部署，完美体验一、Hexo+Github 的痛点1.为啥要用hexo+github？作为一个程序猿，博客肯定是必须要有的拉，github也是必须要混的拉所以:hexo + github = 高大上2.蛋疼的写作体验使用hexo，会面临如下问题：博客源码怎么管理？图片存在哪？如何编写markdown文件？相信很多人都在使用本地编辑器来写博客，那体验，真心蛋疼，比如说vscode，可视化插件一般般，图片还不能复制黏贴，想插入个图片还要先保存成文件放在本地，然后再引用，啥？你说七牛云存储？哪有复制黏贴爽呀当然，博客源码可以使用travis-ci 来做持续集成，想写博客或者换个电脑，clone一下源仓库，写完push一下，就可以不用管了。but，比起独立站点的博客，如wordpress，还是觉得写作体验有点不爽。3. 脑洞大开：偶然间，朋友安利了语雀这个文档写作平台，觉得这就是完美的写作体验，各种UI和编辑器都很舒服秀个图：markdown编辑器也是巨爽：于是乎，就在想能不能在语雀里写作，写完之后自动同步到Github的博客呢？年轻就要有激情，说干就干，花了一天时间，结合了severless、yuque-hexo、travis-ci之后，终于跑通了整个写作、发布、自动部署的流程二、具体方案整体流程：语雀发布一篇文章webhook调用serverless函数serverless 发起请求 trigger 一个 build 任务travis-ci 同步语雀文章并构建hexogithub 生成静态页面展示1. hexo+github+triavs-cihexo如何部署，如何集成travis-ci，等等，我就不再讲了，网上类似的文章灰常多比如：使用Hexo+Github+TravisCI搭建自动发布的静态博客系统GitHub pages + Hexo 搭建自己的个人博客那么如何同步语雀的文章呢？答案就是：yuque-hexo这是一个开源库：https://github.com/x-cold/yuque-hexo用法也很简单：1) 修改package.json，增加配置: “yuqueConfig”: { “baseUrl”: “https://www.yuque.com/api/v2", “login”: “u46795”, “repo”: “blog”, “mdNameFormat”: “title”, “postPath”: “source/_posts/yuque” },2）增加命令： “scripts”: { “sync”: “yuque-hexo sync”, “clean:yuque”: “yuque-hexo clean”, “deploy”: “npm run sync && hexo clean && hexo g -d”, },附上我的package.json文件。2. serverless目前阿里云和腾讯云都有serverless服务，免费的额度完全够用了，下面介绍一下如何配置：1）创建函数2）serverless 函数示例:<?phpfunction main_handler($event, $context) { // 解析语雀post的数据 $update_title = ‘’; if($event->body){ $yuque_data= json_decode($event->body); $update_title .= $yuque_data->data->title; } // default params $repos = ‘xxxx’; // 你的仓库id 或 slug $token = ‘xxxxxx’; // 你的登录token $message = date(“Y/m/d”).’:yuque update:’.$update_title; $branch = ‘master’; // post params $queryString = $event->queryString; $q_token = $queryString->token ? $queryString->token : $token; $q_repos = $queryString->repos ? $queryString->repos : $repos; $q_message = $queryString->message ? $queryString->message : $message; $q_branch = $queryString->branch ? $queryString->branch : ‘master’; echo($q_token); echo(’===’); echo ($q_repos); echo (’===’); echo ($q_message); echo (’===’); echo ($q_branch); echo (’===’); //request travis ci $res_info = triggerTravisCI($q_repos, $q_token, $q_message, $q_branch); $res_code = 0; $res_message = ‘未知’; if($res_info[‘http_code’]){ $res_code = $res_info[‘http_code’]; switch($res_info[‘http_code’]){ case 200: case 202: $res_message = ‘success’; break; default: $res_message = ‘faild’; break; } } $res = array( ‘status’=>$res_code, ‘message’=>$res_message ); return $res;}/** @description travis api , trigger a build* @param $repos string 仓库ID、slug* @param $token string 登录验证token* @param $message string 触发信息* @param $branch string 分支* @return $info array 回包信息*/function triggerTravisCI ($repos, $token, $message=‘yuque update’, $branch=‘master’) { //初始化 $curl = curl_init(); //设置抓取的url curl_setopt($curl, CURLOPT_URL, ‘https://api.travis-ci.org/repo/'.$repos.'/requests'); //设置获取的信息以文件流的形式返回，而不是直接输出。 curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); //设置post方式提交 curl_setopt($curl, CURLOPT_CUSTOMREQUEST, “POST”); //设置post数据 $post_data = json_encode(array( “request”=> array( “message”=>$message, “branch”=>$branch ) )); $header = array( ‘Content-Type: application/json’, ‘Travis-API-Version: 3’, ‘Authorization:token ‘.$token, ‘Content-Length:’ . strlen($post_data) ); curl_setopt($curl, CURLOPT_HTTPHEADER, $header); curl_setopt($curl, CURLOPT_POSTFIELDS, $post_data); //执行命令 $data = curl_exec($curl); $info = curl_getinfo($curl); //关闭URL请求 curl_close($curl); return $info;}?>这里有几个需要获取的参数：travis登录token，在travis-ci.org 中设置界面获取：仓库ID 或 扩展名，使用findder 或者 postman 发起一个请求： https://api.travis-ci.org/owner/Ghostdar/repos回包中可以获取到ID 和 slug。3） 配置触发方式一般会得到这么个api：https://service-s08f6nvk-1251…3. 语雀配置配置一个仓库的webhook:可以选择所有更新触发或者主动触发，主动触发的意思即发布需要勾选一个选项才会触发webhook。具体可参见语雀文档：https://www.yuque.com/yuque/developer/doc-webhook；将serverless生成的api填入,可以在链接后面带参数：token 登录tokenrepos 仓库idmessage 提交信息branch 分支示例：https://service-s08f6nvk-1251833201.ap-guangzhou.apigateway.myqcloud.com/release/xxx?repos=xxx&token=xxx&message=xxx&branch=xxx如果不在链接带参数则写在serverless函数内。4. 开始发布或更新一篇文章发布或者更新一篇文章后，我们前往travis-ci,可以看到已经触发了一次构建请求：构建完成后，咱们的博客上已经妥妥的展示出来拉附上博客地址：https://ghostdar.github.io/ ，羞耻的求个star三、其他的思路1. github api 可以使用github 的 api ，每当更新文章，自动生成一个commit ，触发travis-ci 构建，但是感觉工作量很大，就放弃了2. 有待挖掘的travis-ci 目前我使用的方法是trigger a build ，其实可以做到更多的 自定义配置为啥不研究？主要是我懒当然，如果有更好的方案也欢迎交流最后：再次感谢语雀开发webhook，以及@尹挚 大神的yuque-hexo插件~附上地址：yuque-hexo: https://github.com/x-cold/yuque-hexoyuque-blog: https://github.com/x-cold/yuque-blog ...

原文链接：hexo博客使用gitalk评论插件，自动创建issues脚本工程使用步骤1、clone脚本工程git clone https://github.com/LevisLv/gi...2、下载必要依赖cd gitalk-auto-create-issues && npm install3、修改配置文件修改consts.js的以下配置：1、BLOG_BASE_URL // 博客地址，结尾不带斜杠’/‘2、GITHUB_ACCESS_TOKEN // 配置在环境变量里，在 这里 生成3、GITHUB_OWNER // github用户名4、GITHUB_REPO // 放置博客静态资源的仓库5、LABEL_NAME_BLACK_LIST // 黑名单，哪些title不生成对应的issue6、LABEL_DEFAULT // 默认的gitalk标签，一般用默认值’Gitalk'7、LABEL_COLOR_DEFAULT // 默认标签的颜色8、LABEL_COLOR_OTHER // 其他title标签的颜色4、执行脚本node app效果图

Hexo被称为是最佳的静态博客程序之一，然而其繁琐的环境搭建、构建，发布过程，让很多人望之却步，转而使用了传统的WordPress等博客程序，抛开维护成本不说，本着折腾一切的心态，最终研究出了一套完善的自动部署方案。Hexo特色超快速度: Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。支持 Markdown: Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。一键部署: 只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。丰富的插件: Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade, CoffeeScript。目前市面上还存在很多类似的静态网站生成器，详情请查看：https://www.staticgen.com/<!— more —>如何实现优雅发布就目前而言，Hexo发布的方式有以下几种：原始方式，即在本地搭建相关环境，编写md文件后，手动hexo g生成静态文件，然后通过hexo deploy发布到Github Pages；利用Github + Webhook来实现自动发布（这个需要一台自己服务器）详见：http://www.swiftyper.com/2016…使用第三方的Hexo-Client、Hexo-Admin等程序，详见：https://github.com/search?q=h…使用Travis CI持续部署Hexo，详见：https://www.jianshu.com/p/569…使用Netlify进行优雅地持续部署。详见：https://www.netlify.com简要流程使用Github登陆Netlify。使用StaticGen一键初始化Hexo仓库。将Hexo源码仓库Clone到本地，调整网站配置，编写文章。本地无需Nodejs、NPM、Hexo环境，修改完成后Push到Github，Netlify检测到仓库变更后实现自动部署。在Netlify整个部署过程中, 你只需要提交代码, 其余的master部署预览(包括MR的预览), HTTPS证书, 静态资源的优化与CDN加速, 部署消息通知, 等等都不用再操心. 真的是太优雅了!创建项目在StaticGen上选择Hexo使用Github登陆设置一个Github仓库名轻点3步，轻松实现网站上线第一步：自动部署不用做任何设置, 每次master分支有更新代码, Netlify就会帮你自动部署代码. 图为部署记录实时看到部署的日志:第二步：自定义域名默认情况下，Netlify为我们分配了一个随机域名（可以自定义二级域名、独立域名）第三步：开启Https自动生成Let’s Encrypt的证书, 也支持上传自己的证书，详见：https://www.netlify.com/docs/…其他：Netlify的优缺点优点：提供webhook的形式触发部署提供Html代码注入自动优化自动部署通知缺点：不能检测到git submodule的变更关于Markdown编辑器现在我们已经完成了Hexo的持续部署，将Hexo源码项目Clone到本地后，可以使用IDEA导入，IDEA内置的Markdown编辑器正好用来写文章，而IDEA内置的Git版本管理工具也不赖，哈哈，如此一来，书写博客就如同写代码一般，写完提交到Git即可。此外、IDEA内置的Markdown编辑器不支持插入图片，我这里写了个轻量级的Markdown编辑器扩展程序, 支持粘贴图片文件然后上传到七牛云存储, 然后生成Markdown图片标记插入到文章中。详见https://gitee.com/wuwenze/mar…效果图附我的博客：https://wuwenze.com/

Hexo 博客主题Hexo 默认的主题简陋？不太好看？就是不喜欢？其实想要更换 Hexo 的主题是很简单的，Hexo 提供了可插拔式的主题机制，让我们可以轻松地更换博客主题。可以在「官方收集的主题列表」挑选任意一个你喜欢的主题，总有一个适合你。「skapp」这个主题挺不错的，接下来就参照这个主题的官网的教程进行安装使用。主题的安装（skapp）各用 Docker 快速搭建 node.js v8.9.3 环境docker run -it –name node8 –rm \ -v $(pwd):/app -w /app \ -p 4000:4000 \ node:8.9.3 /bin/bash在 windows 下各种报错，无奈转到 Linux 的机子上操作cd blog# 将 skapp 主题 clone 至 themes/skapp 文件夹下git clone https://github.com/Mrminfive/hexo-theme-skapp.git themes/skapp# 安装 skapp 主题指定的依赖# 基于 2018-12-19，有个小坑：要使用 node.js v8.9.3 版本才能正常安装这些依赖，是由于 lunr 仍然在使用 nodejieba 2.2.5 引起的npm install –save hexo-autoprefixer hexo-filter-cleanup hexo-generator-feed hexo-generator-sitemap hexo-renderer-sass hexo-renderer-swig mamboer/lunr.js moment node-sass object-assignhexo cleanhexo server???? 能否使用 .gitmodules 进行管理第三方主题？主题的配置主题的相关配置可以参考「skapp 官方说明」，可以设置：菜单、博客信息、联系方式、外部链接等。header 的背景图（随机图）使用了「Spencer Woo」家提供的 https://api.spencerwoo.com 接口，可随机不同的图片，在 _config.yml 中设置：## header 的背景图header_cover: https://api.spencerwoo.com开启「不蒜子统计」skapp 主题已经集成了「不蒜子统计」，但默认是关闭的，只需在 _config.yml 中开启即可：# Busuanzibusuanzi: true欢迎围观 我的博客 https://y0ngb1n.github.io/ ????自定义样式待续…参考资料官方收集的主题列表hexo-theme-skapp 官方说明Simple Deskop API | 一喵一图OPEN LOGOS ...

Theme-BMW是一款基于HEXO开发的博客框架：提供了友链、关于、标签云等页面，支持数学公式渲染、文章目录、多级导航栏，自带评论系统和浏览统计插件，并且增加了文章分享、打赏、版权声明音乐播放等功能。这次的版本代号是“微声”：旨在号召每个人为自己发声！源码地址???????? 中文文档：https://godbmw.com/passages/2018-11-15-theme-bmw-docs-zh/???? Star On Github：https://github.com/dongyuanxin/theme-bmw在线演示???? 首页页面: https://godbmw.com/????️ 归档页面: https://godbmw.com/archives/???? 分类页面: https://godbmw.com/categories/????️ 标签页面: https://godbmw.com/tags/???? 友链页面: https://godbmw.com/friends/????️ 关于页面: https://godbmw.com/about/特性一览写文章 · 随心而动支持目录渲染/关闭支持多平台分享支持用户打赏支持图片幻灯片播放支持数学公式渲染支持您为不同文章自定义的音乐播放器多页面 · 一键启动支持二级导航栏自带友链页面自带关于页面自带标签云页面自带分类云页面支持自定义页面社交 · 不止你我自带评论系统自带文章统计插件版权 · 保护原创支持文章版权声明和相关信息自定义支持自定义页脚个人信息自定义 · 个性彰显支持自定义样式文件支持自定义脚本文件其它 · SEO | 极速 | …联系方式???? Email: yuanxin.me@gmail.com???? QQ: 2181111110???? 交流群：

通常我们可以使用github pages 来搭建静态博客，建立一个username.github.io的项目就可以了，如果要将其他项目也作为页面展示，可以将代码推送到gh-pages分支。GitHub pages木有默认样式，所以如果你不会自己写css，博客很难看的，所以我们需要hexo.准备先安装好git node hexo初始化$ hexo init blogINFO Cloning hexo-starter to D:\code\hexo\blogCloning into ‘D:\code\hexo\blog’…remote: Enumerating objects: 68, done.remote: Total 68 (delta 0), reused 0 (delta 0), pack-reused 68Unpacking objects: 100% (68/68), done.Submodule ’themes/landscape’ (https://github.com/hexojs/hexo-theme-landscape.git) registered for path ’themes/landscape’Cloning into ‘D:/code/hexo/blog/themes/landscape’…remote: Enumerating objects: 5, done.remote: Counting objects: 100% (5/5), done.remote: Compressing objects: 100% (5/5), done.remote: Total 846 (delta 0), reused 1 (delta 0), pack-reused 841Receiving objects: 100% (846/846), 2.55 MiB | 16.00 KiB/s, done.Resolving deltas: 100% (445/445), done.Submodule path ’themes/landscape’: checked out ‘73a23c51f8487cfcd7c6deec96ccc7543960d350’INFO Install dependenciesyarn install v1.9.4info No lockfile found.[1/4] Resolving packages…warning hexo > titlecase@1.1.2: no longer maintainedwarning hexo > nunjucks > postinstall-build@5.0.3: postinstall-build’s behavior is now built into npm! You should migrate off of postinstall-build and use the new prepare lifecycle script with npm 5.0.0 or greater.[2/4] Fetching packages…info fsevents@1.2.4: The platform “win32” is incompatible with this module.info “fsevents@1.2.4” is an optional dependency and failed compatibility check. Excluding it from installation.[3/4] Linking dependencies…[4/4] Building fresh packages…success Saved lockfile.Done in 18.06s.INFO Start blogging with Hexo!$ cd blog$ npm installnpm WARN deprecated titlecase@1.1.2: no longer maintainednpm WARN deprecated postinstall-build@5.0.3: postinstall-build’s behavior is now built into npm! You should migrate off of postinstall-build and use the new prepare lifecycle script with npm 5.0.0 or greater.> nunjucks@3.1.4 postinstall D:\code\hexo\blog\node_modules\nunjucks> node postinstall-build.js srcnpm WARN rollback Rolling back node-pre-gyp@0.10.0 failed (this is probably harmless): EPERM: operation not permitted, rmdir ‘D:\code\hexo\blog\node_modules\fsevents\node_modules’npm notice created a lockfile as package-lock.json. You should commit this file.npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“win32”,“arch”:“x64”})added 101 packages, removed 40 packages and updated 321 packages in 23.882s$ ls_config.yml package.json scaffolds/ themes/node_modules/ package-lock.json source/ yarn.lock$ hexo gINFO Start processingINFO Files loaded in 655 msINFO Generated: index.htmlINFO Generated: archives/index.htmlINFO Generated: fancybox/jquery.fancybox.cssINFO Generated: fancybox/blank.gifINFO Generated: fancybox/fancybox_loading@2x.gifINFO Generated: fancybox/fancybox_sprite@2x.pngINFO Generated: fancybox/jquery.fancybox.jsINFO Generated: fancybox/jquery.fancybox.pack.jsINFO Generated: fancybox/fancybox_sprite.pngINFO Generated: fancybox/fancybox_overlay.pngINFO Generated: archives/2018/11/index.htmlINFO Generated: fancybox/fancybox_loading.gifINFO Generated: css/fonts/FontAwesome.otfINFO Generated: fancybox/helpers/jquery.fancybox-thumbs.cssINFO Generated: js/script.jsINFO Generated: fancybox/helpers/jquery.fancybox-buttons.jsINFO Generated: fancybox/helpers/jquery.fancybox-media.jsINFO Generated: fancybox/helpers/jquery.fancybox-buttons.cssINFO Generated: css/fonts/fontawesome-webfont.eotINFO Generated: css/fonts/fontawesome-webfont.woffINFO Generated: fancybox/helpers/fancybox_buttons.pngINFO Generated: fancybox/helpers/jquery.fancybox-thumbs.jsINFO Generated: css/style.cssINFO Generated: css/fonts/fontawesome-webfont.ttfINFO Generated: archives/2018/index.htmlINFO Generated: css/images/banner.jpgINFO Generated: css/fonts/fontawesome-webfont.svgINFO Generated: 2018/11/20/hello-world/index.htmlINFO 28 files generated in 1.26 s$ hexo sINFO Start processingINFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop$ hexo dERROR Deployer not found: gitGitHub key 配置1.生成指定名字的密钥 ssh-keygen -t rsa -C “xx@sina.com” -f ~/.ssh/github_sushengbuhuo 会生成 github_sushengbuhuo 和 github_sushengbuhuo.pub 这两个文件2.密钥复制到托管平台上 vim ~/.ssh/github_sushengbuhuo.pub ，把内容复制至代码托管平台上3.修改config文件 vim ~/.ssh/config #修改config文件，如果没有创建 configHost sushengbuhuo.github.comHostName github.comUser gitIdentityFile ~/.ssh/github_sushengbuhuoHost abc.github.comHostName github.comUser gitIdentityFile ~/.ssh/github_abc4.测试验证$ ssh -T git@github.com:ssh: Could not resolve hostname github.com:: Name or service not known$ ssh -T git@github.comgit@github.com: Permission denied (publickey).$ ssh -T git@sushengbuhuo.github.comHi sushengbuhuo! You’ve successfully authenticated, but GitHub does not provide shell access.配置config.ymldeploy: type: git repository: git@sushengbuhuo.github.com:sushengbuhuo/sushengbuhuo.github.io.git branch: master theme: next推送到GitHub$ hexo clean && hexo gINFO Deleted database.INFO Deleted public folder.INFO Start processingINFO Files loaded in 545 msINFO Generated: index.htmlINFO Generated: archives/index.htmlINFO Generated: fancybox/fancybox_loading.gifINFO Generated: fancybox/fancybox_sprite@2x.pngINFO Generated: fancybox/jquery.fancybox.jsINFO Generated: fancybox/fancybox_overlay.pngINFO Generated: fancybox/jquery.fancybox.cssINFO Generated: fancybox/jquery.fancybox.pack.jsINFO Generated: fancybox/blank.gifINFO Generated: fancybox/fancybox_loading@2x.gifINFO Generated: fancybox/fancybox_sprite.pngINFO Generated: css/fonts/FontAwesome.otfINFO Generated: archives/2018/11/index.htmlINFO Generated: css/fonts/fontawesome-webfont.eotINFO Generated: archives/2018/index.htmlINFO Generated: fancybox/helpers/fancybox_buttons.pngINFO Generated: fancybox/helpers/jquery.fancybox-thumbs.jsINFO Generated: css/fonts/fontawesome-webfont.woffINFO Generated: fancybox/helpers/jquery.fancybox-buttons.cssINFO Generated: js/script.jsINFO Generated: fancybox/helpers/jquery.fancybox-buttons.jsINFO Generated: css/style.cssINFO Generated: fancybox/helpers/jquery.fancybox-thumbs.cssINFO Generated: 2018/11/20/hello-world/index.htmlINFO Generated: css/fonts/fontawesome-webfont.ttfINFO Generated: css/fonts/fontawesome-webfont.svgINFO Generated: css/images/banner.jpgINFO Generated: fancybox/helpers/jquery.fancybox-media.jsINFO 28 files generated in 1.13 s$ hexo dERROR Deployer not found: git$ npm install hexo-deployer-git –savenpm WARN deprecated swig@1.4.2: This package is no longer maintainednpm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“win32”,“arch”:“x64”})+ hexo-deployer-git@0.3.1added 31 packages in 17.866s$ hexo dINFO Deploying: gitINFO Setting up Git deployment…Initialized empty Git repository in D:/code/hexo/blog/.deploy_git/.git/[master (root-commit) 9c86786] First commit Committer: unknown <xxx@sina.com.cn>Your name and email address were configured automatically basedon your username and hostname. Please check that they are accurate.You can suppress this message by setting them explicitly: git config –global user.name “Your Name” git config –global user.email you@example.comAfter doing this, you may fix the identity used for this commit with: git commit –amend –reset-author 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 placeholderINFO Clearing .deploy_git folder…INFO Copying files from public folder…INFO Copying files from extend dirs…warning: LF will be replaced by CRLF in 2018/11/20/hello-world/index.html.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in archives/2018/11/index.html.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in archives/2018/index.html.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in archives/index.html.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in css/style.css.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.css.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.js.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-media.js.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-thumbs.css.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-thumbs.js.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.css.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.js.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.pack.js.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in index.html.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in js/script.js.The file will have its original line endings in your working directory.[master b7f7580] Site updated: 2018-11-20 11:51:50 Committer: unknown <xxx@sina.com.cn>Your name and email address were configured automatically basedon your username and hostname. Please check that they are accurate.You can suppress this message by setting them explicitly: git config –global user.name “Your Name” git config –global user.email you@example.comAfter doing this, you may fix the identity used for this commit with: git commit –amend –reset-author 29 files changed, 5777 insertions(+) create mode 100644 2018/11/20/hello-world/index.html create mode 100644 archives/2018/11/index.html create mode 100644 archives/2018/index.html create mode 100644 archives/index.html create mode 100644 css/fonts/FontAwesome.otf create mode 100644 css/fonts/fontawesome-webfont.eot create mode 100644 css/fonts/fontawesome-webfont.svg create mode 100644 css/fonts/fontawesome-webfont.ttf create mode 100644 css/fonts/fontawesome-webfont.woff create mode 100644 css/images/banner.jpg create mode 100644 css/style.css create mode 100644 fancybox/blank.gif create mode 100644 fancybox/fancybox_loading.gif create mode 100644 fancybox/fancybox_loading@2x.gif create mode 100644 fancybox/fancybox_overlay.png create mode 100644 fancybox/fancybox_sprite.png create mode 100644 fancybox/fancybox_sprite@2x.png create mode 100644 fancybox/helpers/fancybox_buttons.png create mode 100644 fancybox/helpers/jquery.fancybox-buttons.css create mode 100644 fancybox/helpers/jquery.fancybox-buttons.js create mode 100644 fancybox/helpers/jquery.fancybox-media.js create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.css create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.js create mode 100644 fancybox/jquery.fancybox.css create mode 100644 fancybox/jquery.fancybox.js create mode 100644 fancybox/jquery.fancybox.pack.js create mode 100644 index.html create mode 100644 js/script.js delete mode 100644 placeholdergit@github.com: Permission denied (publickey).fatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists.FATAL Something’s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.htmlError: git@github.com: Permission denied (publickey).fatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists. at ChildProcess.<anonymous> (D:\code\hexo\blog\node_modules\hexo-util\lib\spawn.js:37:17) at emitTwo (events.js:126:13) at ChildProcess.emit (events.js:214:7) at ChildProcess.cp.emit (D:\code\hexo\blog\node_modules\cross-spawn\lib\enoent.js:40:29) at maybeClose (internal/child_process.js:925:16) at Socket.stream.socket.on (internal/child_process.js:346:11) at emitOne (events.js:116:13) at Socket.emit (events.js:211:7) at Pipe._handle.close [as _onclose] (net.js:557:12)$ hexo dINFO Deploying: gitINFO Clearing .deploy_git folder…INFO Copying files from public folder…INFO Copying files from extend dirs…warning: LF will be replaced by CRLF in 2018/11/20/hello-world/index.html.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in archives/2018/11/index.html.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in archives/2018/index.html.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in archives/index.html.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in css/style.css.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.css.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.js.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-media.js.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-thumbs.css.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-thumbs.js.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.css.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.js.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.pack.js.The file will have its original line endings in your working directory.warning: LF will be replaced by CRLF in js/script.js.The file will have its original line endings in your working directory.On branch masternothing to commit, working tree cleanBranch ‘master’ set up to track remote branch ‘master’ from ‘git@sushengbuhuo.github.com:sushengbuhuo/sushengbuhuo.github.io.git’.To sushengbuhuo.github.com:sushengbuhuo/sushengbuhuo.github.io.git + 3037877…b7f7580 HEAD -> master (forced update)INFO Deploy done: git$ git clone https://github.com/iissnan/hexo-theme-next themes/nextCloning into ’themes/next’…remote: Enumerating objects: 12033, done.remote: Total 12033 (delta 0), reused 0 (delta 0), pack-reused 12033Receiving objects: 100% (12033/12033), 12.95 MiB | 79.00 KiB/s, done.Resolving deltas: 100% (6966/6966), done.$ hexo clean && hexo gINFO Deleted database.INFO Deleted public folder.INFO Start processing$ hexo d$ hexo sINFO Start processingWARN ===============================================================WARN ========================= ATTENTION! ==========================WARN ===============================================================WARN NexT repository is moving here: https://github.com/theme-nextWARN ===============================================================WARN It’s rebase to v6.0.0 and future maintenance will resume thereWARN ===============================================================INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop安装插件登录admin 即可看到我们所有的文章内容 npm i hexo-admin –savenpm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issuenpm WARN deprecated connect@2.7.11: connect 2.x series is deprecatednpm WARN deprecated cryptiles@2.0.5: This version is no longer maintained. Please upgrade to the latest version.npm WARN deprecated boom@2.10.1: This version is no longer maintained. Please upgrade to the latest version.npm WARN deprecated hoek@2.16.3: This version is no longer maintained. Please upgrade to the latest version.npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“win32”,“arch”:“x64”})+ hexo-admin@2.3.0added 251 packages in 23.975s ╭─────────────────────────────────────╮ │ │ │ Update available 5.6.0 → 6.4.1 │ │ Run npm i npm to update │ │ │ ╰─────────────────────────────────────╯#网站底部字数统计d:\code\hexo\blog npm install hexo-wordcount –savenpm WARN rollback Rolling back node-pre-gyp@0.10.0 failed (this is probably harmless): EPERM: operation not permitted, scandir ’d:\code\hexo\blog\node_modules\fsevents\node_modules’npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“win32”,“arch”:“x64”})+ hexo-wordcount@6.0.1added 1 package in 10.289s中文乱码问题将config.yml 和md文件编码转为utf-8修改config.yml language: zh-Hans新建文章$ hexo new “PHP依赖注入"Hexo 默认以标题为文件名称，可编辑_config.yml new_post_name 参数来改变默认的文件名称，设为 :year-:month-:day-:title.md 可更方便的通过日期来管理文章。新写文章文档结尾查看效果资源hexo文档hexo问题交流 Deployment绝配：hexo+next主题及我走过的坑Hexo+Pages静态博客-Next主题篇关于HEXO搭建个人博客的点点滴滴搭建博客手把手教你用Hexo搭建个人技术博客基于CentOS搭建Hexo博客最快的 Hexo 博客搭建方法超详细Hexo+Github博客搭建小白教程在Github上备份Hexo博客最快的 Hexo 博客搭建方法 ...

一、前言看过很多人，用github创建个人博客，最近抽空也实现的自己的博客，下面就把摸索过程记录下。二、准备安装Node.jsNode.js下载地址：https://nodejs.org/en/download/安装过程一路默认安装即可。详细安装文档参看：http://www.runoob.com/nodejs/…安装Git软件Git软件下载地址：https://git-scm.com/download安装过程一路默认安装即可。关于更多的Git讲解参看：https://www.liaoxuefeng.com/w…安装Hexo什么是 Hexo？Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。Hexo官方网站：https://hexo.io/zh-cn/ ，我用的当前版本是v6.4.0，基本步骤：新建一个blog空文件夹，cmd窗口或vscode终端，输入命令npm install -g hexo-cli全局安装hexo；安装完成后输入hexo -v显示hexo的相关信息说明安装成功；输入命令hexo init初始化hexo项目，安装相关依赖：上一步安装完成，输入命令hexo s或hexo server，开启服务，成功后，在浏览器访问http://localhost:4000生成的默认主题博客。PS：在这里可以npm install hexo-browsersync –save实现热更新，不必每次更改都去刷新浏览器。安装完成后的目录结构 - node_modules // 依赖包 - public // 存放生成的页面 - scaffolds // 生成页模板 - source // 创建的源文章 - themes // 主题 - _config.yml // 博客配置（站点配置） - db.json // 解析source得到的库文件 - package.json // 项目依赖配置 三、修改站点配置_config.yml文件是对整个站点基本信息的配置，比如：# Sitetitle: // 博客名称subtitle: // 副标题description: // 描述 用于seokeywords: // 关键字 用于seoauthor: // 作者 用于seolanguage: // 语言timezone: // 时区四、Github创建一个hexo的代码库和创建其它git仓库一样，只不过名称必须为yourname.github.io这种形式，其中yourname是你github个人账号名，创建好后，找到站点配置文件（blog下的_config.yml文件），找到：# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: type:改成你的 博客git仓库地址和分支：deploy: type: git repo: https://github.com/YourgithubName/YourgithubName.github.io.git branch: master这样，远程仓库配置完成。接下来输入命令hexo generate或hexo g将原markedown文章生成静态页面，放置在生成的public目录下；npm install hexo-deployer-git –save安装hexo的git插件；再输入命令hexo deploy或hexo d将生成的静态页面推送到远程仓库；完成后，在浏览器访问https://yourname.github.io/，就能看到你构建好的个人博客啦！五、写文章hexo支持用markdown写作，在目录blog/source/_posts新建markdown文件，或者使用命令hexo new posts 你的文章标题。小坑：{{}}符号编译出错markdown生成静态页面，{{}}是swig模板符号，属于特殊字符，在编译时解析不了双大括号中间字符串就会报错FATAL Something’s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.htmlTemplate render error: (unknown path) [Line 3, Column 8] unexpected token: }}解决方案：用转义字符代替{ -> &#123; — 大括号左边部分Left curly brace} -> &#125; — 大括号右边部分Right curly brace六、配置主题hexo默认主题是landscape，样式可能不是每个人都喜爱的，官方页提供了一些主题，可以按自己的风格安装，只需在站点配置文件_config.yml更改主题名称。Next主题是目前比较流行的主题，文档相对比较成熟。next主题文档安装cd bloggit clone https://github.com/theme-next/hexo-theme-next themes/next更换主题# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next修改Next主题配置文件目录blog/themes/next找到_config.yml文件，其中有很多配置项，下面列举几个常用的。更换头像# Sidebar Avataravatar: # in theme directory(source/images): /images/avatar.gif # in site directory(source/uploads): /uploads/avatar.gif # You can also use other linking images. url: /images/avatar.png # If true, the avatar would be dispalyed in circle. rounded: true # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar. opacity: 1 # If true, the avatar would be rotated with the cursor. rotated: false只需将头像的url换成你自己头像的url或者直接覆盖头像图片即可。注意这里的根/的绝对路径是blog/themes/next/source/，以后写文章引用本地图片的话，注意放到这个目录下！代码高亮NexT使用Tomorrow Theme作为代码高亮，共有5款主题供你选择。 NexT默认使用的是白色的normal主题，可选的值有normal，night，night blue， night bright，night eighties。# Code Highlight theme# Available values: normal | night | night eighties | night blue | night bright# https://github.com/chriskempson/tomorrow-themehighlight_theme: normal添加分类页文章可能需要分类，添加分类页cd bloghexo new page categories此时在blog/source目录下就生成了categories/index.md文件：—title: 分类date: 2018-08-28 14:59:48type: categoriescomments: false // 分类页不需要添加评论—然后，放开主题配置文件_config.yml中menu setting对categories注释menu: home: / || home categories: /categories/ || th以后文章的内容头声明的分类就会在分类页有索引了。添加标签页跟添加分类页一样，文章也需要标签cd bloghexo new page tags此时在blog/source目录下就生成了tags/index.md文件：—title: 标签date: 2018-08-28 14:34:22type: tagscomments: false // 标签页不需要评论—然后，放开主题配置文件_config.yml中menu setting对tags注释menu: home: / || home tags: /tags/ || tags以后文章的内容头声明的分类就会在分类页有分类了。404页当访问当前站点，页面找不到，跳转到404页，推荐用腾讯公益404页面，寻找丢失儿童，让大家一起关注此项公益事业！使用方法，新建404.html页面，放到主题的source目录下，内容如下：<!DOCTYPE HTML><html><head> <meta http-equiv=“content-type” content=“text/html;charset=utf-8;”/> <meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1” /> <meta name=“robots” content=“all” /> <meta name=“robots” content=“index,follow”/> <link rel=“stylesheet” type=“text/css” href=“https://qzone.qq.com/gy/404/style/404style.css"></head><body> <script type=“text/plain” src=“http://www.qq.com/404/search_children.js" charset=“utf-8” homePageUrl=”/” homePageName=“回到我的主页”> </script> <script src=“https://qzone.qq.com/gy/404/data.js" charset=“utf-8”></script> <script src=“https://qzone.qq.com/gy/404/page.js" charset=“utf-8”></script></body></html>站点分析统计对于个人站点，我们需要统计用户访问量，用户分布，跳转率等。Next主题推荐使用的有百度统计、Google分析、腾讯分析了，使用均一样，注册获取站点统计id。百度统计我一直用的百度统计，注册百度统计，管理 > 网站列表 > 新增网站完成后，代码管理 > 代码获取，就能得到统计id。# Baidu Analytics IDbaidu_analytics: 统计id不蒜子统计不蒜子统计可以统计站点以及每个页面的PV、UV和站点总的访问数，以小眼睛的形式展现。编辑主题配置文件中的busuanzi_count的配置项。当enable: true时，代表开启全局开关。若total_visitors、total_views、post_views的值均为false时，不蒜子仅作记录而不会在页面上显示。内容分享服务Next主题还提供了对外提供分享接口，包括百度分享、addthis Share和NeedMoreShare2，要用到哪个，只需把相应enable: true，注册账号获取id即可。评论功能当前版本配置，支持畅言，Disqus，valine，gitment。畅言 - 搜狐提供的评论组件，功能丰富，体验优异，防止注水；但必须进行域名备案。只要域名备过案就可以通过审核。Disqus - 国外使用较多的评论组件。万里长城永不倒，一枝红杏出墙来，你懂的。valine - LeanCloud提供的后端云服务，可用于统计网址访问数据，分为开发版和商用版，只需要注册生成应用App ID和App Key即可使用。Ditment - Gitment 是一款基于GitHub Issues的评论系统。支持在前端直接引入，不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作，同时有完整的Markdown / GFM和代码高亮支持。尤为适合各种基于GitHub Pages的静态博客或项目页面。畅言要备案，对于对于挂靠在GitHub的博客非常的不友好，放弃！Disqus，目前国内网络环境访问不了，放弃！valine在用户没有认证登录可以评论，不能防止恶意注水，放弃！我选择用Gitment，让用户用自己的GitHub账号才能评论，用git的一个仓库来存储评论（评论以该仓库的issue形式展现）。gitment配置Gitment的全部配置项如下，# 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: true # Hide ‘Powered by …’ on footer, and more language: zh-CN # Force language, or auto switch by theme github_user: xxx # MUST HAVE, Your Github Username github_repo: xxx # MUST HAVE, The name of the repo you use to store Gitment comments client_id: xxx # MUST HAVE, Github client id for the Gitment client_secret: xxx # EITHER this or proxy_gateway, Github access secret token for the Gitment proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled开启enable为true就显示评论框了，不过要真正实现评论可用，需要用自己的github账号注册一个应用许可证书，即OAuth application，注册成功就生成了client_id和client_secret。步骤：你的github首页 > settings > Developer settings > OAuth Apps > New oAuth App。填写好相关信息，其中，Homepage URL和Authorization callback URL都写上你的github博客首页地址，比如https://xxx.github.io/，点击Register application即可完成注册，生成Client ID和Client Secret。这样，用户点击评论框右边登入跳转到github授权，允许授权跳转回来就可以评论啦！小坑：有些文章评论初始化弹出validation failed错误因为GitHub的每个issues有两个lables，一个是gitment，另一个是id，id取的是页面pathname，标签长度限定不超过50个字符，而像一般中文标题文章，转义后字符很容易超过50个字符。目录blog/themes/next/layout/_third-party/comments找到文件gitment.swig，在这里我用文章创建时间戳来当作id，这样长度就不会超过50个字符，成功解决！七、总结构建自己的博客并不难，也不需要什么专业代码基础，需要的是耐心而已（┭┮﹏┭┮都是配置）。PS：我的GitHub博客https://wuwhs.github.io 大佬拍轻点 ...