博客搭建与配置

有时想写个自己的博客又苦于需要一堆堆的前置技能：既要先完成优雅而具备良好兼容性的界面设计，又要购买服务器和部署后台，这严重阻碍了大众踏出搭建网站第一步的积极性，于是 VuePress 横空出世，按照教程操作，从构建网站(包括完成第一篇文章)到在 Github Page 只需要短短 10 分钟不到的时间。不信？打开Visual Code和浏览器跟着文章来一遍吧~ 本文基于 VuePress 1.1.0 文档编写.0.前置本地安装好 Node.js（版本>=8.0）, 推荐安装 yarn.具备可运行命令的终端 Window: cmder、Git BashMac: Terminal、iTermLinux: 默认终端注册好 Github 账号1. 本地创建博客项目参(fan)考(yi): 官方教程-Getting Started1）打开终端mkdir blog # 本地创建 blog 项目cd blogyarn add -D vuepress # 或者 npm i -D vuepress, 安装 vuepress 依赖mkdir docsecho 'Hello, my first blog!' > docs/README.md # 编写第一篇文章（注意符号）2）在 package.json 中加入脚本命令{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }, "devDependencies": { "vuepress": "^1.1.0" }}3）尝试本地运行项目运行 yarn docs:dev 或者 npm run docs:dev ...

一、前言如上图所示：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远程仓库上 ...

集成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 ...

介绍在之前为了搭建 VuePress 的文档，顺带制作了视频教程，如今准备再次搭建一个 VuePress 的项目，一看自己的视频竟然有五个小时，天呐，我只是需要过一遍而已，所以重新整理成文档吧，万一将来又要用呢……当然，如果您觉得文字版不够直观，可以前往观看视频版： 【☛ 视频地址 ☚】 ，当时录制完本地测试后觉得声音大小还可以，结果一套录完了才发现声音很小，所以推荐带上耳机。VuePress 文档示例自动化方案1. 获取对应目录下的文件名这是一个初步应急的方案，对应 视频 地址，完整的自动化处理在延期队列中……创建 utils/getFilenames.js 方法：const { readdir, writeFile } = require(‘fs’);const { resolve } = require(‘path’);const FOLDERPATH = ‘/home/yuan/Projects/documents/docs/OS/centos’;readdir(FOLDERPATH, (err, files) => { let filenames = []; files.forEach(file => { if (file === ‘README.md’) { file = ''; } else { file = file.replace(’.md’, ‘’); file = '${file}'; } filenames.push(file); }); filenames.sort(); // 排序 writeFile(resolve(__dirname, ‘./filenames.js’), [${filenames}], () => { console.log(‘文件名获取完成.’); })});每次修改了对应的内容后获取该分类的路径，接着修改 FOLDERPATH ，再修改 package.json 文件： “scripts”: { “getname”: “node utils/getFilenames.js” },之后每次修改完路径后使用 npm run getname 即可获得结果，将数据放入对应的侧边栏配置中即可。2. 自动部署到 Github Pages首先进入 travis-ci 官网，将对应的项目启用 Travis CI ：点击该项目名称后可以进一步配置：在 VuePress 官方文档中提及要使用 github-token，首先获取这个 token，进入 Github 设置，左下的 Developer settings：添加描述，勾选 repo：将生成的 token 放入 Travis 配置中：确认构建好你的项目后，在根目录下按照文档添加 .travis.yml：language: node_jsnode_js: - lts/*script: - npm run docs:builddeploy: provider: pages skip-cleanup: true local_dir: docs/.vuepress/dist github-token: $GITHUB_TOKEN keep-history: true on: branch: master发现少了自定义域名这一步骤，追加一个脚本吧：# cname.sh#!/usr/bin/env shset -ecd docs/.vuepress/distecho ‘css.shanyuhai.top’ > CNAME# .travis.ymllanguage: node_jsnode_js: - lts/*script: - npm run docs:build - npm run cnamedeploy: provider: pages skip-cleanup: true local_dir: docs/.vuepress/dist github-token: $GITHUB_TOKEN keep-history: true on: branch: master# package.json"scripts": { “docs:dev”: “vuepress dev docs”, “docs:build”: “vuepress build docs”, “cname”: “bash cname.sh”},commit 提交：访问自定义域名 css.shanyuhai.top ，想起域名尚未解析，解析域名并重新查看结果：最后为了方便阅读，所以将内容进行了划分：VuePress 初始化及发布VuePress 插件系列VuePress 自动化参考文档VuePress 官网 ...

介绍在之前为了搭建 VuePress 的文档，顺带制作了视频教程，如今准备再次搭建一个 VuePress 的项目，一看自己的视频竟然有五个小时，天呐，我只是需要过一遍而已，所以重新整理成文档吧，万一将来又要用呢……当然，如果您觉得文字版不够直观，可以前往观看视频版： 【☛ 视频地址 ☚】 ，当时录制完本地测试后觉得声音大小还可以，结果一套录完了才发现声音很小，所以推荐带上耳机。VuePress 文档示例插件列表为了方便的统一管理 plugin，需要对 docs/.vuepress/config.js 进行配置：// docs/.vuepress/config.jsconst pluginConf = require(’../../config/pluginConf.js’);module.exports = { plugins: pluginConf,}插件的很多服务都需要对 head 标签进行修改：// docs/.vuepress/config.jsconst headConf = require(’../../config/headConf.js’);module.exports = { head: headConf,}之后就可以去修改 config/pluginConf.js 和 config/headConf.js 文件了。1. PWA具体的 PWA 配置介绍可以看 官方文档，对应的 视频（8:20） 。VuePress 的版本会导致使用方式不一致，此处仅介绍 1.x 版本：安装：yarn add -D @vuepress/plugin-pwa@next# OR npm install -D @vuepress/plugin-pwa@next使用：module.exports = { ‘@vuepress/pwa’: { serviceWorker: true, updatePopup: { message: “发现新内容可用.”, buttonText: “刷新”, // 自定义弹窗 // popupComponent: ‘MySWUpdatePopup’, } },};PWA NOTES：serviceWorker 选项仅仅用来控制 service worker，为了让你的网站完全地兼容 PWA，你需要在 .vuepress/public 提供 Manifest 和 icons，更多细节，请参见 MDN docs about the Web App Manifest. 此外，只有您能够使用 SSL 部署您的站点时才能启用此功能，因为 service worker 只能在 HTTPs 的 URL 下注册。 – VuePress 官网因为使用的 Github Pages 服务，所以即使使用 CNAME 后也依然保持 SSL 状态。Manifest 第六个视频其实存在一些问题，在第九个 视频 中解决了，利用 App Manifest Generator 直接生成即可。参考示例：{ “name”: “飞跃高山与大洋的鱼”, “short_name”: “山与海”, “description”: “飞跃高山与大洋的鱼的文档”, “theme_color”: “#2196f3”, “background_color”: “#2196f3”, “display”: “standalone”, “start_url”: “index.html”, “icons”: [ { “src”: “/icons/icon-72x72.png”, “sizes”: “72x72”, “type”: “image/png” }, { “src”: “/icons/icon-96x96.png”, “sizes”: “96x96”, “type”: “image/png” }, { “src”: “/icons/icon-128x128.png”, “sizes”: “128x128”, “type”: “image/png” }, { “src”: “/icons/icon-144x144.png”, “sizes”: “144x144”, “type”: “image/png” }, { “src”: “/icons/icon-152x152.png”, “sizes”: “152x152”, “type”: “image/png” }, { “src”: “/icons/icon-192x192.png”, “sizes”: “192x192”, “type”: “image/png” }, { “src”: “/icons/icon-384x384.png”, “sizes”: “384x384”, “type”: “image/png” }, { “src”: “/icons/icon-512x512.png”, “sizes”: “512x512”, “type”: “image/png” } ]}还需要获取一下 favicons 等：// config/headConf.jsmodule.exports = [ [’link’, { rel: ‘apple-touch-icon’, href: ‘/apple-touch-icon.png’ }], [’link’, { rel: ‘icon’, href: ‘/favicon-32x32.png’ }], [’link’, { rel: ‘manifest’, href: ‘/manifest.json’ }], [‘meta’, { name: ’theme-color’, content: ‘#ffffff’ }],];2. 评论（待修改）评论需要按照你的需求来：如果你希望所有评论可以在 Github 可见，那么使用 Gitalk 吧，正好有一篇新鲜出炉的文章；如果你想要所有非 Github 用户也可以评论的话可以使用 Valine，视频 地址。这边利用的其实 主题的继承 ，通过修改 VuePress 的默认主题来实现需要的功能，在制作视频的时候官网还没有对这个详细的描述，这次更新发现有了新的介绍，由于时间关系及下一个项目不需要评论所以暂时延期处理：首先修改默认主题下的 Page 组件（这意味着你不能随便使用 npm install 了）：<!– node_modules/@vuepress/theme-default/components/Page.vue –> </p> </div> <slot name=“bottom”/> <Valine></Valine> </main></template>接着创建 Valine 组件，对于评论组件有以下要求：在 README.md 文件中可以关闭评论；在不同的路由显示不同的评论<!– docs/.vuepress/components/Valine.vue –><template> <div class=“ValineComment” v-if=“comment”> <hr> <span :id=“page.path” class=“leancloud-visitors” :data-flag-title=“page.title”> <em class=“post-meta-item-text”>文章阅读量 </em> <i class=“leancloud-visitors-count”>1000000+</i> </span> <div id=“vcomments”></div> </div></template><script>export default { computed: { comment: function () { let { comment } = this.$frontmatter; if (typeof comment === ‘undefined’) { return true; } return comment; }, page: function () { let { path = ‘/’, title = ‘首页’ } = this.$page; return { path, title }; } }, mounted() { this.renderValine() }, watch: { ‘$route’: { handler: function (to, from) { if (to.path !== from.path) { this.$nextTick(() => { this.renderValine(); }) } } } }, methods: { renderValine() { if (typeof window !== ‘undefined’) { this.window = window; window.AV = require(’leancloud-storage’); } const secretKeyConf = require(’../../../config/secretKeyConf.js’); const Valine = require(‘valine’); new Valine({ el: ‘#vcomments’ , appId: secretKeyConf.appId, appKey: secretKeyConf.appKey, notify:false, verify:false, avatar:‘retro’, path: window.location.pathname, meta: [’nick’,‘mail’,’link’], pageSize: 10, visitor: true, placeholder: ‘欢迎留言…’ }); } }}</script><style lang=“stylus” scoped>.ValineComment { padding 0 2rem;}.leancloud-visitors { display inline-block margin-bottom 1rem;}</style>3. Back-to-top具体的 Back-to-top 配置介绍可以看 官方文档 。安装：yarn add -D @vuepress/plugin-back-to-top@next# OR npm install -D @vuepress/plugin-back-to-top@next使用：// config/pluginConf.jsmodule.exports = { ‘@vuepress/back-to-top’: true,};效果图：4. google-analytics具体的 google-analytics 配置介绍可以看 官方文档 。你需要去 Google 获取对应的 key 。安装：yarn add -D @vuepress/plugin-google-analytics@next# OR npm install -D @vuepress/plugin-google-analytics@next使用：// config/pluginConf.js// 此处引申出的隐私问题在最后有说明const secretKeyConf = require(’./secretKeyConf.js’);module.exports = { ‘@vuepress/google-analytics’: { ‘ga’: secretKeyConf.ga }};效果：0. 隐藏私密信息按理说，会了 git 基本上都知道这个功能，然而依然有很多人把自己的私密信息（如密码）上传到 Github 仓库，对应 视频（29:00） 。主要是使用 .gitignore 文件来忽略你要上传的文件，举个例子：// config/secretKeyConf.jsmodule.exports = secretKeyConf = { appId: ‘xxxxxx’, appKey: ‘xxxxxx’, ga: ‘xxxxxx’, googleSearchConsole: ‘xxxxxx’,}将 config/secretKeyConf.js 追加到 .gitignore 文件中# secretKeyConfsecretKeyConf.js最后为了方便阅读，所以将内容进行了划分：VuePress 初始化及发布VuePress 插件系列VuePress 自动化参考资料VuePress 官网Valine 官网 ...

介绍在之前为了搭建 VuePress 的文档，顺带制作了视频教程，如今准备再次搭建一个 VuePress 的项目，一看自己的视频竟然有五个小时，天呐，我只是需要过一遍而已，所以重新整理成文档吧，万一将来又要用呢……当然，如果您觉得文字版不够直观，可以前往观看视频版： 【☛ 视频地址 ☚】 ，当时录制完本地测试后觉得声音大小还可以，结果一套录完了才发现声音很小，所以推荐带上耳机。VuePress 文档示例环境准备对于环境准备不怎么熟悉的还是推荐看 视频第一节 吧。Windows安装 cmder解压完成后复制其路径地址，将其添加到环境变量。使用 Win + R 键快速启动 cmder，若成功则添加环境变量成功。安装 git安装包一路 next 即可，在桌面上右键出现 git bash here 或命令行中输入 git –version 能够得到具体的版本信息则安装成功。安装 nodejs安装包同样一路 next 即可，在命令行输入 node -v ，若得到具体版本信息则安装成功。安装 yarn安装完成后，在命令行输入 yarn –version ， 若得到具体版本信息则安装成功。创建项目创建项目可以分为两种形式：远程仓库# xxx 为你的远程仓库连接git clone xxxcd your_project_namenpm init -y本地仓库# xxx 为你的远程仓库连接npm init your_project_name -ycd your_project_namegit remote add origin xxx安装 vuepress# 全局安装yarn global add vuepress@next # 或者：npm install -g vuepress@next# 本地安装yarn add -D vuepress@next # 或者：npm install -D vuepress@next配置 package.json 脚本如果你的文档不是在 docs 下，可以按照你的设置来：{ “scripts”: { “docs:dev”: “vuepress dev docs”, “docs:build”: “vuepress build docs” }}上面配置完后，可以进行测试：yarn docs:dev # 或者：npm run docs:dev若能在浏览器中正常访问，则表示安装成功。LinuxLinux 配置与 Windows 所需一致，相信都用上 Linux 了，这点问题能够解决。搭建及优化1. 了解路由与配置导航关于文件是如何渲染为对应的路由的：文件的相对路径页面路由地址/README.md//guide/README.md/guide//config.md/config.html了解了这个基本的概念后，就可以去配置对应的导航了。具体的导航栏配置介绍可以看 官方文档，看不懂可以去看我的 视频 。在实践后发现，若将所有内容放置在 docs/.vuepress/config.js 下将会很臃肿，难以阅读与维护，推荐将其分离开，在根目录下新建一个 config 文件夹：// docs/.vuepress/config.jsconst navConf = require(’../../config/navConf.js’);module.exports = { themeConfig: { nav: navConf },}举个例子：// config/navConf.jsmodule.exports = [ { text: ‘Home’, link: ‘/’ }, { text: ‘Guide’, link: ‘/guide/’ }, { text: ‘基础’, items: [ { text: ‘Algorithm’, link: ‘/base/algorithm/’ }, { text: ‘Interview’, link: ‘/base/interview/’ }, { text: ‘Clean’, link: ‘/base/clean/’ }, { text: ‘Git’, link: ‘/base/git/’ }, ]}, { text: ‘开发’, items: [ { text: ‘FrontEnd’, items: [ { text: ‘JavaScript’, link: ‘/FrontEnd/javascript/’ }, { text: ‘CSS’, link: ‘/FrontEnd/css/’ }, { text: ‘Webpack’, link: ‘/FrontEnd/webpack/’ }, { text: ‘Nodejs’, link: ‘/FrontEnd/nodejs/’ }, ]}, { text: ‘BackEnd’, items: [ { text: ‘Koa’, link: ‘/BackEnd/koa/’ }, { text: ‘MongoDB’, link: ‘/BackEnd/mongodb/’ }, { text: ‘Nginx’, link: ‘/BackEnd/nginx/’ }, ] }, ] }];2. 配置侧边栏侧边栏比导航栏要更为繁琐一些。具体的导航栏配置介绍可以看 官方文档 。首先在 docs 文件夹下新建你需要的目录及文件：OS├── centos│ ├── 01-add-user.md│ ├── 02-login-with-rsa-key.md│ ├── 03-upload-file-to-server.md│ └── README.md├── manjaro│ ├── 01-solve-problems-with-manjaro.md│ └── README.md└── windows └── README.md配置 config 文件，当文章很多的情况下，还集中在 config 文件中，那就得炸了：// docs/.vuepress/config.jsconst sidebarConf = require(’../../config/sidebarConf/index.js’);module.exports = { themeConfig: { sidebar: sidebarConf },}文章需要进行分类，所以会分成更多的子文件，通过 index.js 进行管理：# config/sidebarConfsidebarConf├── Base│ ├── algorithm│ │ └── index.js│ ├── clean│ │ └── index.js│ ├── git│ │ └── index.js│ └── interview│ └── index.js├── Guide│ └── index.js├── index.js└── OS ├── centos │ └── index.js ├── manjaro │ └── index.js └── windows └── index.js// config/sidebarConf/index.js// 介绍const guide = require(’./Guide/index.js’);// 基础const git = require(’./Base/git/index.js’);const interview = require(’./Base/interview/index.js’);const algorithm = require(’./Base/algorithm/index.js’);const clean = require(’./Base/clean/index.js’);// 操作系统const windows = require(’./OS/windows/index.js’);const manjaro = require(’./OS/manjaro/index.js’);const centos = require(’./OS/centos/index.js’);/** * 侧边栏的配置 * 当路由深度越深时应当排序在更前方 * 示例: /frontend 和 /frontend/css * * 应当将 /frontend/css 写在更上方 */module.exports = { // 指南 Guide ‘/guide/’: guide, // 基础 Base ‘/Base/git/’: git, ‘/Base/interview/’: interview, ‘/Base/clean/’: clean, ‘/Base/algorithm/’: algorithm, // 操作系统 OS ‘/OS/manjaro/’: manjaro, ‘/OS/windows/’: windows, ‘/OS/centos/’: centos, // 根目录下的 sidebar, 对于所有未匹配到的都会应用该 sidebar // ‘/’: [’’] // 此处选择禁用};以 CentOS 举个例子：// config/sidebarConf/OS/centos/index.jsconst utils = require(’../../../../utils/index.js’);const children = [’’,‘01-add-user’,‘02-login-with-rsa-key’,‘03-upload-file-to-server’];module.exports = [ utils.genSidebar(‘CentOS’, children, false),];genSidebar 函数：const utils = { genSidebar: function (title, children = [’’], collapsable = true, sidebarDepth = 1) { return { title, collapsable, sidebarDepth, children } }};module.exports = utils;3. SEO 配置基本配置可以帮助我们做好网站的 SEO，更容易被搜索到。具体的基本配置介绍可以看 官方文档 。// docs/.vuepress/config.jsmodule.exports = { title: ‘飞跃高山与大洋的鱼’, description: ‘飞跃高山与大洋的鱼的文档, vuepress 文档’,}4. 更新时间与静态资源更新时间，如果按照文档进行配置的话时间格式是非中文的风格，解决很简单：// 添加多语言，改为国内即可module.exports = { locales: { ‘/’: { lang: ‘zh-CN’, } }, themeConfig: { lastUpdated: ‘上次更新’, },}所有的静态资源都需要放置在 .vuepress/public 目录下，你也可以为它们建立分类文件夹（这里不好的效果是在预览本地的 Markdown 文件时无法看到图片）：public├── apple-touch-icon.png├── app.png├── base│ └── interview│ └── 1468042984788341.png├── favicon-32x32.png├── favicon.ico├── FrontEnd│ └── javascript│ ├── es6_20190112123602.png│ └── es6_20190112124206.png├── manifest.json5. 部署到 github 并关联到自定义域名具体的部署介绍可以看 官方文档 。之前做视频的时候还没有 Travis CI 的使用说明，刚刚看的时候发现有了，昨天花了好久来硬啃 Travis 官网，血亏……这边我发布到的是 docs.shanyuhai.top ，所以 base 属性默认为空即可；若是发布到 docs.shanyuhai.top/docs 则 base 属性为 docs。deploy.sh 文件示例：#!/usr/bin/env sh# 确保脚本抛出遇到的错误set -e# 生成静态文件npm run docs:build# 进入生成的文件夹cd docs/.vuepress/dist# 如果是发布到自定义域名echo ‘docs.shanyuhai.top’ > CNAMEgit initgit add -Agit commit -m ‘deploy’# 如果发布到 https://<USERNAME>.github.io/<REPO>git push -f git@github.com:shanyuhai123/documents.git master:gh-pagescd -6. 添加 Git 仓库和编辑链接参考文档及视频同上：// docs/.vuepress/config.jsmodule.exports = { themeConfig: { // 你的 Git 项目地址，添加后会在导航栏的最后追加 repo: ‘shanyuhai123/documents’, // 启用编辑 editLinks: true, // 编辑按钮的 Text editLinkText: ‘编辑文档！’, // 编辑文档的所在目录 docsDir: ‘docs’, // 假如文档放在一个特定的分支下： // docsBranch: ‘master’, },}7. 域名解析关于域名解析详情可以去看我的 视频 （第五个视频中的解析方式存在问题）。解析方式需要改为 CNAME 的形式：最后为了方便阅读，所以将内容进行了划分，关于插件具体介绍的文档还在书写中，有时间可以先去看下 视频。参考资料VuePress 官网 ...

用了一个来月，总体来讲Ghost是令人满意的。虽然界面可配置化程度不如WordPress，但一些小的功能定制起来也非常容易。例如添加一个归档页面。添加静态页面在ghost博客中，每一个发表的文章都会有一个对应的URL地址。如果你不想让它出现在首页的文章列表中，仅希望使用自定义的链接去访问它，那么就需要用到Ghost的静态页面功能。如下图所示：将Turn this post into a page选中，这篇文章将不会出现在文章列表中。添加页面模板点击发布归档以后，使用指定的URL在浏览器中去访问，会出现404的错误。因为博客系统找不到对应的模板去显示页面内容。这个时候，需要手动在ghost目录下创建该页面的文件。以本文为例，为归档页面指定了访问URL为xxx/archives，所以在ghost/content/themes/casper下，要创建一个page-archives.hbs文件。关于生成页面元素的脚本，网络上大部分帖子都是在这个hbs中加入了相关jquery的处理。但这有一个不便之处：修改的是页面文件，所以每次修改都需要重启ghost。所以笔者决定使用code injection的功能，将相关脚本注入到页面中。添加元素脚本脚本分两部分：1.生成对应的HTML元素，2.元素CSS样式生成HTML这部分主要是参考了这篇帖子，使用Ghost的API取得对应文章的相关属性进行显示。这部分的脚本，要注入到归档这篇文章的code injection中（不是全局！）<!– 注入到Post Footer中 –><script type = “text/javascript”>/** * 调用ghost API，完成文章归档功能 * 所需组件：jQuery、moment.js * @ldsun.com */jQuery(document).ready(function() { //获取所有文章数据，按照发表时间排列 $.get(ghost.url.api(‘posts’, { limit: ‘all’, order: “published_at desc” })).done(function(data) { var posts = data.posts; var count = posts.length; for (var i = 0; i < count; i++) { //调用comentjs对时间戳进行操作 //由于ghost默认是CST时区，所以日期会有出入，这里消除时区差 var time = moment(posts[i].published_at).utcOffset("-08:00"); var year = time.get(‘y’); var month = time.get(‘M’)+1; var date = time.get(‘D’); if( date<10 ) date = “0”+date; var title = posts[i].title; var url = “{{@blog.url}}"+posts[i].url; var img = posts[i].feature_image; //首篇文章与其余文章分步操作 if (i > 0) { var pre_month = moment(posts[i - 1].published_at).utcOffset("-08:00”).get(‘month’)+1; //如果当前文章的发表月份与前篇文章发表月份相同，则在该月份ul下插入该文章 if (month == pre_month) { var html = “<li><time>"+ month + “/” + date +"</time><div style=‘background-image: url(” + img + “)’ /><a href=’"+url+”’>"+title+"</a></li>"; $(html).appendTo(".archives .list-"+year+"-"+month); } //当月份不同时，插入新的月份 else{ var html = “<div class=‘item’><h3><i class=‘fa fa-calendar fa-fw’ aria-hidden=‘true’></i> “+year+”-"+month+"</h3><ul class=‘archives-list list-"+year+”-"+month+"’><li><time>"+date+“日</time><a href=’"+url+”’>"+title+"</a></li></ul></div>"; $(html).appendTo(’.archives’); } }else{ var html = “<div class=‘item’><h3><i class=‘fa fa-calendar fa-fw’ aria-hidden=‘true’></i> “+year+”-"+month+"</h3><ul class=‘archives-list list-"+year+”-"+month+"’><li><time>"+month+"/"+date+"</time><div style=‘background-image: url(" + img + “)’ /><a href=’"+url+”’>"+title+"</a></li></ul></div>"; $(html).appendTo(’.archives’); } } }).fail(function(err) { console.log(err); });});</script>创建CSS样式以下内容注入到Post Header中<!– 脚本需要用到moment.js依赖 –><script src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script><!– CSS样式定义 –><style type=“text/css”>ul.archives-list li { display: flex; margin-bottom: 8px; background-color: #FFEFEF; padding: 8px; border-radius: 4px;}ul.archives-list li time { margin-right: 16px;}ul.archives-list li a { flex: 1;}ul.archives-list li div { margin-right: 16px; width: 60px; height: 40px; background-size: cover; background-position: center;}</style>添加导航在Ghost后台的Design中，可以添加一条导航路径，点击保存即可看到在网站的导航中出现了对应的链接。重启Ghost以上简单4步完成后，重启Ghost即可查看效果。如果对CSS效果有自己的想法，可以随时修改注入的js和css代码。重新发布即可，无需重启Ghost! ...

一、前言看过很多人，用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 大佬拍轻点 ...