环境搭建blog

Hexo + hueman 主题博客同时搭建到github和coding上

背景

  • 很想有个自己的“一亩三分地”
  • 不想投入啥money(好吧，我承认其实是穷)，看到Github、Coding、Gitee支持主页静态Pages
  • 在Hexo和Halo之间徘徊了下，由于后者是Java编写，需要服务器支持，果断Pass掉了

Hexo 简介

详见主页： https://hexo.io/zh-cn/

  • Hexo 基于Node.js开发的博客工具
  • Hexo 把Markdown文章，生成静态Html页，最后上传部署web服务器，就形成了博客页面

Hexo搭建

安装Git

windows安装地址：https://git-scm.com/download/win
Linux安装命令：sudo apt-get install git
版本查看命令：git --version

安装Node.js

下载地址：https://nodejs.org/zh-cn/

  • 查看Nodejs版本：node -v

  • 查看npm包管理器版本：npm -v

    npm切换国内淘宝镜像（避免安装龟速）

  • 更改改仓库、缓存目录：

1
npm config set prefix "D:\nodejs\node_global"
1
npm config set cache "D:\nodejs\node_cache"
  • 查看本地仓库目录
1
npm list -global
  • 配置淘宝镜像站
1
npm config set registry=http://registry.npm.taobao.org
  • 查看配置信息
1
npm config list

安装Hexo

输入安装命令：

1
npm install -g hexo-cli

查看版本：

1
hexo -v

初始Hexo博客目录：

1
hexo init myblog

“myblog”可以任性取，然后：

1
2
cd myblog //进入博客文件夹
npm install

“myblog”初始化完成后，目录结构如下：

  • node_modules: 依赖包

  • public：存放生成的页面

  • scaffolds：生成文章的一些模板

  • source：用来存放你的文章

  • themes：主题

  • _config.yml: 博客的配置文件

    安装Hueman主题

    从WordPress中移植到Hexo中的主题,选择它的原因有：

    myblog

  • 1.进入到”themes”目录: cd themes

  • 2.用git克隆主题到本地：

1
git clone https://github.com/ppoffice/hexo-theme-hueman.git

  • 3.参照说明设置主题“_config.yml”配置

    增加博客访问统计

    由于Hueman没有统计，度娘后采用了“不蒜子”这个方法，几行代码就搞定。

  • 修改footer模板
    目录：\hueman\layout\common\footer.ejs
    footer
    footerCode

footer统计代码片段：

1
2
3
4
5
6
7
8
9
10
11
12
"parent">
  
"child">
    "busuanzi_container_site_pv">
      访问量"busuanzi_value_site_pv">次
    
    "post-meta-divider">|
    "busuanzi_container_site_uv" style='display:none'>
      访客数"busuanzi_value_site_uv">人


居中样式：

1
2
3
4
5
6
7
8
9
10
11
<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  • 修改date.ejs日期模板代码
    目录在：\hueman\layout\common\post\date.ejs

dataCode
统计代码如下：

1
2
3
"busuanzi_container_page_pv" style='display:none' class="<%= class_name %>">
        "icon-smile icon"> 阅读数："busuanzi_value_page_pv">次

替换hexo-asset-image插件

如果生成MD页面图片路径有问题，用cnpm安装hexo-asset-image-fixed插件替换，指令如下:

1
npm install hexo-asset-image-fixed --save

Hexo部署配置

申请Github&Coding账号

注意、注意、注意：

  • 申请邮箱同一个
  • 两个账号相同

这样才能两个账号一同部署

新建仓库，设置静态页

说明：仓库名最好同用户名

GitHub步骤

Coding步骤

  • 新建仓库

注意、注意、注意：
仓库类型必须是“DevOps项目”才能生成静态网页

项目类型

  • 设置静态页面
    静态页面设置
    在上图左上角“设置”中，设置：网站名、绑定域名、是否强制https等

Hexo使用

  • $ hexo new post helloHexo ——- 新建博客页面
  • $ hexo clean —————————– 清除历史版本
  • $ hexo g 或 $ hexo generate ——– 生成静态网页
  • $ hexo s或$ hexo server ————– 启动服务预览
  • $ hexo d或$ hexo deploy ————– 上传部署站点

Hello WowPanda

分享到