OnePiece of universal

zby-universal

0%

Ubuntu16.04 Hexo 搭建个人主页

Posted on Edited on In

（单机上面搭建Hexo就不再多说，配置好git、nodejs、hexo就能使用啦！具体百度一下就行…）

思路：在github的博客项目仓库中新建一个分支。原master分支用来存放生成的静态网页，新的分支用来存放Hexo生成的网站原始文件

多系统Hexo同步

linux ubuntu下配置环境

1
2
3
4
5
6
7
sudo apt-get install nodejs # 安装nodejs
sudo apt-get install npm # 安装npm
node -v # 检测是否安装成功
npm -v
sudo npm install cnpm -g --registry=https://registry.npm.taobao.org # cnpm是国内镜像
sudo cnpm install -g hexo-cli # 安装hexo
sudo cnpm install --save # 安装插件

在github仓库中新建分支

点击branch,输入新分支名(这里我用的名称是source),点击创建

将新建的source分支设为默认分支

在该仓库中，点击Setting->Branches->Default branch,将默认分支设为source,并保存

在本地克隆仓库，并上传源文件

  • 首先，在命令行输入 git branch查看当前是否是新建分支source
  • 克隆仓库项目 git clone https://github.com/xxxx/xxx.git
  • 进入克隆文件夹，将.git以外的全部文件删除
  • 将除.deploy_git,node_modules,public以外的全部源文件拷贝到该系统的此克隆目录下
  • 修改.gitignore，如果没有该文件，可以新建一个，内容为：
1
2
3
4
5
6
7
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
  • push 源文件
1
2
3
git add .
git commit -m "add branch"
git push
  • 部署博客
1
hexo clean && hexo g && hexo d
  • 同步源文件
1
2
git fetch
git merge
  • 然后就可以新建博客，推送分支了

常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# hexo 安装配置
npm install hexo -g # 安装
npm update hexo -g # 更新
hexo init # 项目初始化

# hexo 命令行参数简写
hexo g # hexo generate 用md生成静态文件html
hexo p # hexo publish
hexo s # hexo server 本地启动服务预览
hexo d # hexo deploy 部署

# 新建
hexo new "博客名" # 新建博客
hexo new page "页面名" # 新建页面
hexo generate # 生成静态页面至public目录
hexo server # 开启预览访问端口，即本地加载，默认端口4000
hexo deploy # 将.deploy 目录部署同步到github

# 本地调试
hexo clean
hexo s --debug

Hexo 编写博客

Hexo 编写博客 （一）新建博客并同步到github

1
2
3
4
hexo new "博客名" # 会在/source/_posts/ 目录下新建md文件，编辑即可修改
hexo clean
hexo generate
hexo deploy

Hexo 编写博客 （二）如何在博客中插入图片

  • 打开主题配置文件themes/next/_config.yml

    1
    2
    3
    4
    5
    6
    7
    # 找到avatar 字段
    先去除avatar前的注释符#
    url可以是任意的，相对于该配置文件source/的相对路径或者绝对路径或者是网络上的路径

    # 特别注意：
    图像放在/themes/next/source/images中
    url:/image/xxx.png 即可

Hexo 编写博客 （三）博客添加标签、类别等属性

  • 生成属性链接页面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 标签属性
    hexo new page tags
    vim /source/tags/index.md
    # 在文件中添加 type: tags

    # 类别属性
    hexo new page categories
    vim /source/categories/index.md
    # 在文件中添加 type: categories

  • 修改主题配置文件

    在theme/ 中打开配置文件_config.yml, 找到menu参数，将tags和categories的注释去掉即可添加相应链接

Hexo 编写博客 （四）访问次数统计

  • 打开/theme/next/_config.yml配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    #找到 busuanzi，将enable 设为true
    busuanzi_count:
      enable: true
      total_visitors: true
      total_visitors_icon: fa fa-user
      total_views: true
      total_views_icon: fa fa-eye
      post_views: true
      post_views_icon: fa fa-eye
      
    # 找到footer 在底下添加counter，并设为true
    footer:
      # Specify the date when the site was setup. If not defined, current year will be used.
      since: 2020
      counter: true
      ...

  • 打开themes/next/layout/_partials/footer.swig

    1
    2
    3
    4
    # 在最后添加以下代码
    {%- if theme.footer.counter %}
      <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    {%- endif %}

    Hexo 编写博客 （五）添加博客结束标记

  • 打开themes/next/layout/_macro/passage-end-tag.swig(没有就新建)

    1
    2
    3
    4
    {%- if theme.passage_end_tag.enabled %}
      <div style="text-align:center;color: #ccc;font-size:14px;">
         ------ 本文结束<i class="fa fa-paw"></i>感谢您的阅读 ------</div>
    {%- endif %}

  • 打开themes/next/layout/_macro/post.swig

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 在post-body之后 post-footer之前添加下面代码
    #{#####################}
    #{### END POST BODY ###}
    #{#####################}

    # 上述是文件 位置，下面是添加的代码
    {%- if not is_index %}
      <div>
         {%- include 'passage-end-tag.swig' %}
      </div>
    {%- endif %}

  • 打开themes/next/_config.yml

    1
    2
    3
    # 末尾添加
    passage_end_tag:
      enabled: true

Hexo 编写博客 （六）hexo无法正常显示latex语法

​ 参考链接

  • 安装插件

    1
    npm install hexo-math –save

  • 解决语义冲突

    1. 修改node_modules\kramed\lib\rules\inline.js 

      1
      2
      3
      4
      5
      6
      第11行
      //escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
      escape: /^\\([`*\[\]()#$+\-.!_>])/,
      第20行
      //  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
      em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

    2. 更改配置文件

      打开主题文件夹中的_config.yml对应位置改为：

      1
      2
      3
      4
      5
      6
      # MathJax Support
      mathjax:
        enable: true
        per_page: true
        #cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML
        cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML

  • 写博客

    需要加上mathjax:true

    1
    2
    3
    4
    5
    6
    ---
    title: index.html
    date: 2018-2-8 21:01:30
    tags:
    mathjax: true
    --

Hexo 编写博客 （七）hexo无法正常显示本地插图

参考链接

  • 修改总配置文件_config.yml

    post_asset_folder: true

  • 安装插件，在命令窗口输入

    npm install https://github.com/CodeFalling/hexo-asset-image -- save

  • 在markdown编辑时引入图片

    ![图片1](图片1.png)

    注：每篇博客所需的图片都放在其同名文件夹下

Hexo 编写博客 （八）hexo提交搜索引擎（百度+谷歌）

​ 参考链接

------ 本文结束感谢您的阅读 ------