Mac下搭建基于Hexo + Github的个人博客


最近心血来潮,想搭建个人博客,就把搭建过程整理了一下,顺便进行记录,以备将来查看

一.创建GitHub仓库,配置SSH

  • 创建仓库

    image-20210126143721658

  • 配置SSH key

    输入命令

    git config --global user.name "yourname"
    git config --global user.email "youremail"

    yourname和youremail分别对应github的用户名和邮箱

    然后开始生成密钥,输入命令

    ssh-keygen -t rsa -C "youremail"

    按提示回车、输入密码等即可生成SSH key,可以通过~/.ssh/id_rsa.pub可以获得SSH key

    如下图:

    image-20210126144700609

  • 将获得的SSH key复制,打开github -> settings -> SSH and GPG keys

    image-20210126145228894

image-20210126145418806

  • 输入ssh -T git@github.com查看是否成功,如下出现你的用户名就表示成功

    image-20210126150923960

二.安装博客需要的框架

  • 安装 Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

如果出现错误curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused,如下

image-20210125172705266

  • 错误原因:判定是DNS污染

  • 解决办法:地址

    1.下载一个修改host的软件,例如switchhosts

    2.复制输入如下地址

    199.232.68.133 raw.githubusercontent.com
    199.232.68.133 user-images.githubusercontent.com
    199.232.68.133 avatars2.githubusercontent.com
    199.232.68.133 avatars1.githubusercontent.com

    3.激活

    image-20210125173849017

命令行执行成功的话会下载东西,如下:

image-20210125174803049

三.创建文件夹

  • 在需要的地方新建个空文件夹blog

  • 新建个终端窗口,cd到文件夹里

  • 初始化,hexo init,如下所示

    image-20210126103931937

  • 完成后文件夹会多一些文件,如下所示:

    image-20210126104108517

四.安装博客相关插件

  • 自动部署到github的插件

    npm install hexo-deployer-git --save
  • 安装atom生成插件,便于感兴趣的小伙伴们订阅(RSS订阅)

    npm install hexo-generator-feed --save

    然后在本地Blog根目录下的_config.yml文件中,添加以下配置

    # Extensions
    ## Plugins: http://hexo.io/plugins/
    #RSS订阅
    plugin: -hexo-generator-feed
    #Feed Atom
    feed:
         type: atom
         path: atom.xml
         limit: 20

    在主题目录下的_config.yml目录下,添加如下配置

    rss: /atom.xml
  • 安装博客首页生成插件

    npm install hexo-generator-index --save
  • 安装tag生成插件

    npm install hexo-generator-tag --save

    至此,需要安装的已安装完毕

五.创建博客、调试、发布

  • 由于之前已经创建过文件夹,这一步可以忽略,如果没有,可以执行如下命令来创建个文件夹

    hexo init Blog
  • 撰写博客内容

    cdBlog文件夹下,执行命令

    hexo new testBlog

    其中testBlog是博客的名字,在Blog/source/_posts中就会新建个testBlog.md的文件,然后就可以编辑你的博客内容了

  • 本地调试

    sudo hexo server 或 sudo hexo s

    然后可以访问http://localhost:4000来查看结果,如下图所示

    image-20210126112324111

  • 安装发布插件

    在博客文件夹运行下面命令

    npm install hexo-deployer-git --save
  • 部署到github

    _config.yml文件的最后一行修改配置

    image-20210126150638408

  • 运行生成发布博客

    sudo hexo clean
    sudo hexo g
    sudo hexo d

    其中 hexo clean 清除之前生成的东西,也可以不加

    hexo ghexo generate 的缩写,生成静态文章

    hexo dhexo deploy 的缩写,部署文章

稍等一会,在浏览器访问网址: https://你的用户名.github.io 就会看到你的博客啦!!

六.自定义博客

1.更换主题

可以通过克隆的方式,把主题克隆到项目/themes路径下,Hexo也有很多主题

next主题

这里以matery主题为例

在blog文件下运行下面命令,将主题克隆下来

git clone https://github.com/blinkfox/hexo-theme-matery themes/matery

结果如下:

image-20210126164516111

其中_config.yml文件可以查看该主题的配置信息

主题下载好后,打开blog文件夹的_config.yml,修改theme的内容,如下

image-20210126164846535

然后运行一下命令

sudo hexo g
sudo hexo d

之后就可以看到修改过的新主题了

同时该主题有很多插件可以使用,设置下就行,例如字数统计等,具体可以参考https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md

七.文章相关设置

  • 使用hexo new 文章名称命令新建一个blog,顶部会Front-matter可以进行设置,非必填项,但titledate建议要有,如下

image-20210128172605319

​ Front-matter选项详解

image-20210128173056574

​ 最简示例:

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---

​ 最全示例:

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
  - Typora
  - Markdown
---

​ 为了新建文章方便,可以修改下文章模板,把希望带的字段加进去,路径是/scaffolds/post.md

image-20210129110944377

  • 新建文章自动打开本地Markdown编辑器

    写文章时,在控制台执行hexo new "文章名"就会在source/_posts/下生成一篇新的.md文件,但需要手动打开,显得比较麻烦,可以通过以下方式设置成新建文章时自动打开编辑器

    在博客的根目录下新建一个文件夹scripts(如果有就不用新建),在此目录下新建一个Javascript文件,文件名据说可随意命名,这里命名为auto_open.js

    js文件里添加如下内容:

     >var exec = require('child_process').exec;
     >hexo.on('new', function(data){
    // 请将 Typora 替换为你用的Markdown 编辑器
    exec('open -a "Typora.app" ' + data.path);
     >});

    重新部署后,新建文章就可以打开编辑器了

八.增加百度和谷歌的搜索引擎验证

1.验证站点,此处以HTML标签验证的方法验证

  • 百度验证

    首先打开百度搜索引擎验证,输入博客网址,按提示走,选择HTML便签验证,然后将下方的代码复制下来,网页先不要关

    image-20210129172136201

    image-20210129172325055

  • 谷歌验证

    打开谷歌搜索引擎验证,输入博客地址

    image-20210129172802516

    下一步中,选择其他验证方法的HTML标记,复制meta中的代码

    image-20210129173020146

  • 打开本地博客主题下的layout/_partial 文件夹,有一个名为head的文件,将上面获得的两行代码粘贴到<head></head>之间,保存文件,然后分别执行以下命令部署到Github服务器

    sudo hexo clean
    sudo hexo g
    sudo hexo d
  • 然后分别点击刚才百度、谷歌的验证按钮进行站点验证

2.生成站点地图

  • 安装sitemap插件

    npm install hexo-generator-sitemap --save
    npm install hexo-generator-baidu-sitemap --save
  • 打开本地博客目录下的_config.yml文件,修改url参数为你的博客的首页地址

    url: http://jonzzs.cn # 修改成你博客的首页地址
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:
  • 添加以下配置

    # 自动生成sitemap
    sitemap: 
      path: sitemap.xml
    baidusitemap: 
      path: baidusitemap.xml
  • 重新部署到github

    sudo hexo clean
    sudo hexo g
    sudo hexo d

3.将站点地图提交到谷歌

4.百度推送

  • 百度主动推送

    在进行操作前,先在百度搜索平台处获取相关信息,注册的域名token,如下图

    image-20210202174734658

    在根目录下,安装插件,使用以下命令:

    npm install hexo-baidu-url-submit --save

    然后,修改根目录下的_config.yml文件,增加如下内容

    baidu_url_submit:
      count: 3 ## 提交最新的3个链接
      host: https://***.github.io ## 在百度站长平台中注册的域名
      token: `上一步中获取的token` ## 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
      path: baidu_urls.txt ## 文本文档的地址, 新链接会保存在此文本文档里

    最后,加入新的deployer:

    deploy:
    - type: git ## 这是原来的deployer
      repo: https://github.com/yourusername/yourusername.github.com.git  //自己的Github仓库地址
      branch: master
    - type: baidu_url_submitter ## 这是新加的

    执行hexo deploy的时候,新的连接就会被推送了

  • 百度自动推送

    安装自动推送JS代码的网页,在页面被访问时,页面url将立即被推送给百度,修改主题目录下的layout/post.ejs文件,添加如下代码:

    <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、homebrew操作指令

  • Hexo操作指令

    $ hexo clean      #清理缓存
    $ hexo generate   #生成静态文件
    $ hexo server     #启动本地服务器
    $ hexo deploy    #部署
    或者
    $ hexo clean      #清理缓存
    $ hexo g          #生成静态文件
    $ hexo s          #启动本地服务器
    $ hexo d         #部署
  • homebrew操作指令

    // 安装 homebrew
    $ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    // 卸载 homebrew
    $ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"
    // 查看版本
    $ brew -v
    // 下载软件:brew install 软件名
    如:$ brew install htop, 安装htop
    // 如需要图形安装的软件 要加cask
    如:$ brew cask install google-chrome
    // 卸载软件:brew uninstall 软件名
    如: $ brew cask uninstall google-chrome
    // 软件搜索:brew search 软件名
    如: $ brew search google
    // 列出已安装的包
    $ brew list
    // 查看软件相关信息:brew info 软件名
    如:$ brew info google-chrome
    // 删除 Homebrew下载的包
    $ brew cleanup
    // 更新 Homebrew
    $ brew update

这篇是window下的搭建教程,还没来得及操作,先记录下Yafine的Hexo+github 搭建博客 (超级详细版,精细入微)

本文参考了一下文章:

gsl的mac 搭建基于Hexo-Github的Blog

笑胖仔的GitHub Pages + Hexo免费搭建个人博客_Mac

洪卫的Hexo+Github: 个人博客网站搭建完全教程(看这篇就够了)


文章作者: 逸之
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 逸之 !
  目录