Hexo+Github搭建博客总结

最新推荐文章于 2023-07-26 08:39:40 发布
最新推荐文章于 2023-07-26 08:39:40 发布
阅读量361 收藏
点赞数
文章标签： git javascript 运维 ViewUI
原文链接：https://juejin.im/post/5b6f3443e51d45667851d6a4
版权

本文永久链接：zhengtuqiang.pw/2018/07/31/…

1. 前言

本来今年年初的时候就已经搭建了博客，当时看的是掘金里面的一篇教程。但是其实那篇教程说的不是很好，遇到很多问题。直至最近又有了建设个人品牌的想法，遂继续折腾个人博客。在网上找了各种资料，后来发现Grok抱残守缺的这篇教程。Grok抱残守缺的博客不但令人知其然，也令人知其所然。跟着教程一次就成功了。我的这个总结总体是站在Grok抱残守缺基础上去写的，作为补充。

2. 过程概览

这个步骤就不重复造轮子了，跟着Grok抱残守缺的这篇教程来即可。

  1. 安装 Node js，Git。这两个都是下载完之后直接安装就可以了。
  2. Git 配置以及 Github 配置 SSH。
  3. 安装 Hexo。
  4. Hexo 本地建站。
  5. 主题配置。本文以 Material-Flow 为例说明。
  6. 绑定独立域名。

3. Material-Flow 主题配置

这是一个遵循安卓 Material Design 风格的主题，支持响应式，也就是说会根据当前是浏览器屏幕去自适应显示，在手机端的显示效果也不错。我主要做了以下的修改：汉化，关于页面，百度统计，不蒜子阅读量统计和一个彩蛋功能。这是我的定制版本。

3.1 Material-Flow 主题概述

主题的文件结构如下：

├─material-flow
│  ├─layout #ejs模板
│  │  ├─_partial 
│  │  └─_widget #侧栏相关
│  ├─snapshots
│  └─source #字体、图片、js资源
│      ├─fonts
│      ├─images
│      ├─js
│      └─less
复制代码

我们先来看一下 layout/layout.ejs，默认通过 hexo new <title> 会把 layout.ejs 作为模板生成 html 网页。

<%- partial('_partial/head') %> <!-- header -->
<body>
  <%- partial('_partial/loading') %>
  <script>setLoadingBarProgress(20)</script> 
  <%- partial('_partial/header', null, {cache: !config.relative_link}) %>
    <script>setLoadingBarProgress(40);</script>
  <div class="l_body">
    <div class='container clearfix'>
      <div class='l_main'>
        <%- body %> <!-- 主体 -->
      </div>
      <aside class='l_side'>
        <%- partial('_partial/side') %> <!-- 侧栏 -->
      </aside>
      <script>setLoadingBarProgress(60);</script>
    </div>
  </div>
  <%- partial('_partial/footer', null, {cache: !config.relative_link}) %> <!-- footer -->
  <script>setLoadingBarProgress(80);</script>
  <%- partial('_partial/scripts') %>
  <script>setLoadingBarProgress(100);</script>
</body>
</html>
复制代码

第10行 <%- body %>，这是 html 页面的主体部分。一共有三个 menu 首页，文章，关于，主体部分分别对应的是 layout/_partial/post.ejs，layout/_partial/categories.ejs，layout/_partial/article.ejs。注意具体的博文页面中，主体部分也是 layout/_partial/article.ejs。

3.2 汉化&时间修改

汉化的思路其实很简单，hexo s 后查看网页，通过 FileLocationPro 工具搜索一下主题文件夹中想汉化的内容，然后将其改为中文即可。例如我汉化了上一篇，下一篇，查看更多以及浏览器页签的一些内容。 Material-Flow 的时间格式默认为 月 日，年 （MMM D, YYYY），我统一把时间格式改为 年/月/日 （YYYY/M/D）。

3.3 关于页面

Material-Flow 主题默认只有两个两个 menu 首页 ，文章，我们可以在博客添加一个 关于 menu。首先在主题的配置文件中添加 关于 menu。

# navigation menu
menu:
  - name: 首页
    slug: home
    url: /
  - name: 文章
    slug: archives
    url: /archives
  #添加关于
  - name: 关于 #menu名字
    slug: about #这是用于自动生成选中menu时，menu项高亮的css
    url: /about #url路径
复制代码

然后在 cmd 命令中 hexo new page "about"，此命令会在 source 文件夹下生成一个 about 文件夹，里面的 index.md 就是 关于 menu 的主体内容，可以像写一篇博文一样写自己的简介。像我就在里面加入了一个彩蛋。

3.4 百度统计

注册一个百度统计账号，然后添加自己博文的地址，拿到统计代码。 统计代码：

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?你的百度统计id";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
复制代码

首先在 layout/_partial/head.ejs 中添加以下代码：

<script>
    function setLoadingBarProgress(num) {
      document.getElementById('loading-bar').style.width=num+"%";
    }
    <!-- 百度统计begin -->
  <% if(theme.tongji.baidu_id){ %>
  	var _hmt = _hmt || [];
    (function() {
       var hm = document.createElement("script");
       hm.src = "https://hm.baidu.com/hm.js?<%- theme.tongji.baidu_id %>";
       var s = document.getElementsByTagName("script")[0]; 
       s.parentNode.insertBefore(hm, s);
    })();
  <% } %>
  <!-- 百度统计end -->
  </script>
</head>
复制代码

然后在主题配置文件 _config.yml 中添加以下代码：

tongji:
  baidu_id: #你的百度统计id
复制代码

以后百度统计 id 变更的话，直接替换掉 baidu_id 即可。

3.5 不蒜子阅读量统计

百度统计有多项强大的分析功能，如流量分析，来源分析，访问分析，转化分析，访客分析以及优化分析等。但是百度统计主要是给博主自己用的。对于访客来说，我想让他们也能看到此文章的受欢迎程度，需要在博文的底部展示阅读量。我选择的是不蒜子，号称是两行代码搞定计数。 因为我想要在页面底部显示阅读量信息，所以首先在 layout/_partial/footer.ejs 中添加以下代码：

<% if(theme.tongji.busuanzi){ %>
	<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
	<% if(is_home()){ %>
	<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
	</span>
	<span id="busuanzi_container_site_uv">
	本站访客数<span id="busuanzi_value_site_uv"></span>人次
	</span>
	<% }else { %>
	<span id="busuanzi_container_page_pv">
	本文总阅读量<span id="busuanzi_value_page_pv"></span>次
	</span>
	<% } %>
  <% } %>
复制代码

然后在主题配置文件 _config.yml 中添加以下代码：

tongji:
  busuanzi: true #不蒜子开关
复制代码

因为不蒜子没有id，所以只有一个表示开关的属性。layout/_partial/footer.ejs 第1行 <% if(theme.tongji.busuanzi){ %> 会进行判断。

3.6 <!-- more -->

这个标记要单独拿出来说一下。在写博文的时候，<!-- more --> 标记会把前面的内容生成摘要，也就是 post.excerpt 取到的内容。当初不知道如何实现「查看更多」的功能，在这上里浪费了不少时间。后来才知道用这个标记就可以实现了( ๑ŏ ﹏ ŏ๑ )。

4. ejs 的一些用法

在对 Material-Flow 做修改的时候是直接参照上下文的一些代码的，自己没有系统了解过 ejs，所以记录一些零散的用法。

4.1 javascript 混合 html

<% if (post.excerpt) { %>
	  <div class="readmore">
      <a href="<%- url_for(post.path) %>">点击查看</a>
      </div>
    <% } %>
复制代码

javascript 语句用 <% %> 包起来，其中的 html 标签不需要。输出执行结果用<%- %>。

4.2 javascript 读取主题配置文件 _config.yml 的形式

单值

tongji:
  busuanzi: true
复制代码

单值读取

<% if(theme.tongji.busuanzi){ %>
	<!-- 省略 -->
  <% } %>
复制代码

集合

# navigation menu
menu:
  - name: 首页
    slug: home
    url: /
  - name: 文章
    slug: archives
    url: /archives
  - name: 关于
    slug: about
    url: /about
复制代码

集合遍历读取

<% (theme.menu||[]).forEach(function(value){ %>
						<li>
							<a class='flat-box nav-<%=value.slug%>' href='<%=url_for(value.url)%>'>
								<%=value.name%>
							</a>
						</li>
					<%})%>
复制代码

foreach() 之后，value 即为每组数据的一个对象，直接按属性名读取。

4.3 注意事项

在配置文件中注意 -，: 的后面是有一个空格的。

5. 多机更新博客--我的最佳实践

实际上，配置完博客之后会有这么一种场景：假如我的数据损坏了，或者我想在另一台电脑发博文，怎么办？ 其实，从上面这么一个流程下来，你会发现：博客的最主要原料其实就是博文的 md 文件，有了博文的 md 文件那么别的都好说。所以我的做法就是把博文，hexo 配置文件之类必不可少的东西放在云盘，这里我选择的是开源中国的码云（不是马云哦，码云像 Github 一样都是一个基于Git的远程代码仓库，好处在于可以免费创建私有仓库以及在国内可以有更快的访问速度）。

5.1 文件夹概览

MyBlog
	├─主题
	├─其他
	├─博客文章
	│  ├─图片
	│  ├─引用资料
	│  └─文章
	│      ├─about
	│      └─_posts
	└─博客配置文件
复制代码
  • 博客配置文件：主要是 Hexo 的配置文件 _config.yml
  • 博客文章：这是博客的主要「原料」，Hexo 生成 html 的内容来源
  • 其他：放置其他的一些拓展的功能
  • 主题：Hexo 用的主题

5.2 博客管理说明

  1. 博客文章->文章，会通过 Always Sync 同步到 Hexo(D:\MyBlog\Blog) 的文件夹，最后 deploy 到 Github 是在 Hexo 文件夹中进行的。
  2. 主题文件夹会同步到 Hexo 文件夹的主题中去。
  3. 博客配置文件会同步到 Hexo 文件夹的根目录中去。

5.3 博文编写工作流

  1. 博客文章->文章->_posts中进行博文编写。
  2. 在 Hexo 文件夹中进行 hexo g，hexo s，本地检查无误后 hexo d 进行部署。

5.4 多机更新工作流

  1. 安装 Node js，Git。
  2. 安装 Hexo。
     npm config set registry "https://registry.npm.taobao.org"
     npm install -g hexo-cli  #hexo安装
     npm install hexo-renderer-pandoc --save
     npm install hexo-katex --save 
     npm install hexo-renderer-jade --save #Noise主题相关
     npm install hexo-renderer-less --save  #Noise主题相关
     npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content #Material主题相关
     npm install hexo-deployer-git --save  #部署相关
复制代码
  1. Git 配置以及 Github 配置SSH。
  2. clone 此 repo。
  3. 在 repo 文件夹下 hexo init 新建一个 Hexo(命名为 Blog ) 文件夹，此文件夹不用加入 repo 的版本管理。
  4. 配置博客文件以及主题。
  5. 在博客文章->文章->_posts 中编写博文。
  6. 把博文复制到 Hexo 文件夹中进行 hexo g，hexo s，本地检查无误后 hexo d 部署。

6. 参考资料

知行合一 | 用 Hexo 搭建博客

weixin_33809981
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【源码开放】Hexo+Github+Coding 博客butterfly 和 matery 主题 搭建完全教程【整理】
01-08
注意，本篇博客并不是从零手把手教你去搭博客，那样会很花费时间去写一篇文档，况且从零搭建的博客一搜也是一大把，太多重复的内容就没必要继续写了。因此，对于不知道怎么搭建的伙伴，我会提供我搭建时用到的学习...
vue添加百度统计
猫先生的专栏
04-12 5011
申请百度统计后，会得到一段JS代码，需要插入到每个网页中去，在Vue.js项目首先想到的可能就是，把统计代码插入到index.html入口文件中，这样就全局插入，每个页面就都有了;这样做就涉及到一个问题，Vue.js项目是单页应用，每次用户浏览网站时，访问内页时页面是不会刷新的，也就意味着不会触发百度统计代码；所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量，却无法统计到内页的访问流量...
网站搭建简要记述
平平酱的博客
03-13 3250
H96 Max小盒子一、建站1、域名（解析）2、内网穿透3、新建站点二、新建网站-博客、可道云1、搭建2、 虽然搭建了自己的博客，但我还是相信CSDN保存文章更安全，因此规划： CSDN发布技术型文章； 自建博客发布日常型文章。 本文记录一下从建站到安装博客再到优化界面的大体流程。 最终展示：桃子七七 一、建站 如今，拥有一个属于自己的网站是比较酷的事，网上的技术也日渐成熟，即使不清楚前端开发，有一定的技术思路，同样能拼拼凑凑搭建一个花里胡哨的网站。从TB上购买了一台200大洋的小型服务器—小盒子`，看处理
百度统计的JS脚本原理分析
热门推荐
每天进步一点点 - MinCase
05-02 3万+
<!-- p {text-indent:2em} --> 首先，百度统计会要求我们在要统计的页面中嵌入一段js语句，类似如下： var _bdhmProtocol = ((“https:” == document.location.protocol) ? ” https://” : ” http://”); document.write(unescape(“%3C
Docker搭建内部知识库（Wiki）
Hui_and的博客
06-21 8109
构建一个知识管理的内部知识库，Docker＋MySQL 8.0的组合进行搭建简单快捷，配和GitLab进行数据备份
Hexo + github page 实现搭建博客.pdf
08-20
总结来说，Hexo+Github Page搭建博客的流程包括：安装Node.js和Git，配置Github Page，安装Hexo框架，配置主题，添加SSH密钥，以及进行文章撰写、生成和部署。这个过程不仅涉及到了前端静态页面的生成，还包括了后端...
hexo +GitHub个人搭建的博客
08-04
下面将详细阐述Hexo和GitHub搭建个人博客的过程及关键知识点。 1. **Hexo基本概念** - **站点结构**：Hexo站点通常包含`source`、`themes`、`public`、`config.yml`等目录，每个都有特定功能，如`source`存放内容...
博客系列：Hexo+Github博客搭建教程
最新发布
01-03
博客系列：Hexo+Github博客搭建教程
hexo+github搭建自己的博客
05-02
总结来说，"hexo+github"搭建个人博客的过程包括：安装和配置Hexo，创建并设置GitHub仓库，编写和发布文章，以及定制主题和插件。这种方法不仅简单易用，而且免费，还能让你的博客与全世界的开发者社区紧密相连。...
网站如何快速搭建即时响应客服系统
孙叫兽的博客
09-18 1826
首先简单说明一下情况，公司原来的网站是用微起点快速建站做的，几天就搭建完成啦，最近又原生开发了一个大数据网站。 自己在原来的网站搭建了一个客服系统，后来老板不喜欢，我又给取消啦。 直入主题啦 登录百度账号 选择这个百度商业账号。 进入百度统计的页面。 复制里面的代码。 <script> var _hmt = _hmt || []; (fu...
百度统计代码失效怎么办？
猿小白的博客
07-26 1022
当你百度统计失效时，如果网站meta使用了,如果是在统计脚本之前执行，那么此时需要先执行统计脚本，然后再设置metajs会阻塞dom tree解析，css不会阻塞dom tree解析，css只会影响dom tree的绘制css的加载是会阻塞js的运行的，css体积越小影响越小外部资源的最佳方式，header引入外链cssbody结束标签引入script脚本。
百度统计来源为什么会有其他的网站，如何处理比较好
12-23 1826
做过网站的朋友肯定多多少少都使用过百度统计工具，使用百度统计的目的当然是为了了解网站的流量情况，但是最近登陆百度统计后台的时候，却发现百度统计出现很多别的行业词及其它网站，本来并没注意这个问题，但是发现统计数据中的很多搜索词都是违禁广告词，来源域名都是违规域名。那么该怎么去处理解决呢？ 检查很多遍并没有发现网站被黑的问题，按照搜索词自己搜索发现也并不能搜索到我的网站。于是网上找了下资料，发现很多站长都出现了类似“百度统计流量来源出现广告”的问题，很多人并不知道百度统计出现了很多别人的域名怎么回事？下面
vuepress配置百度统计
学而时习之，不亦说乎。
07-19 1826
vuepress配置百度统计 一、添加百度统计 获取百度统计代码 登录百度统计后台 创建站点 复制统计代码 var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?44212d6ce872df50b804d94b24889284"; var s = document.getElementsByTagName("scrip
最近用vuepress统计了一大堆看过的YY小说，说说使用过程吧
wb121017405的博客
06-02 1031
vuepress搭建个人扫书收藏夹从零开始的搭建步骤新建github项目拉取项目到本地进入本地项目安装包初始化并且安装vuepress此时进入开发阶段，但是更改文档时会出现无法热更新的情况在package.json新增scripts命令根目录新增部署脚本deploy.sh执行yarn deploy部署一次打开github-pages 从零开始的搭建步骤 之前用过hexo搭博客，使用上和vuepress差不多，但是vuepress更轻便一些 新建github项目 在github右上角新建项目 拉取项目到本
抓取百度翻译的接口（通过反编译js获取token、gtk、sign等签名信息）
七訫的博客
06-27 3676
废话少说直接上代码。 pc版 baidutranslator.py import requests import json import re import execjs class BaiduTranslator: def __init__(self): self.trans_str = None self.trans_url = "https://f...
web前端数据埋点之--友盟和百度
小花猫哒小栗子
01-14 1666
一：友盟 （1）注册友盟账号，添加站点，填写域名，填写进入链接 （2）在统计代码中复制埋点代码到js文件或者html首页，例如下： <script type="text/javascript"> var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://"); ...
单页面应用里同时埋放多段百度统计的访问分析代码——实战
weixin_33881753的博客
08-07 472
背景 单页面应用使用百度统计需要使用_trackPageview和_setAutoPageview API用来统计每个页面的访问, 应用里如果同时埋放多段百度统计的访问分析代码又需要使用_setAccount API。但是如果单页面应用里又同时埋放多段百度统计的访问分析代码该如何处理呢？ How Step1 引入方式 直接呈上代码，注意事...
【Vue】16.vue项目里引入百度统计
返璞归真
01-27 4137
参考官网：百度统计开放平台 百度统计 最近往项目里面引入百度统计，也是在网上查了各种资料，把百度统计的官网api又好好的看了一下，顺着文档的步骤，一步一步走下来，其实还蛮简单的，首先先在百度统计注册一个账号，在管理页面填写好自己要监控的网站域名，网站的首页，填写完成以后，会自动生成一段代码，如下图所示，我这里已经填写过了，点击获取代码，就可以取到百度自动生成的代码。 但是在vue单...
hexo+github搭建个人博客
12-08
以下是使用Hexo和GitHub Pages搭建个人博客的步骤： 1.安装Node.js和Git 2.安装Hexo ```shell npm install -g hexo-cli ``` 3.初始化Hexo shell hexo init blog cd blog npm install ``` 4.配置Hexo 打开根...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值