使用Hexo搭建github.io个人博客

发表于

环境：

Mac OS Mojave 10.14.6、Git、HomeBrew、NVM
工具及使用内容：
Terminal
Nodejs、Hexo主题
hoxo-deployer-git

一、配置环境

  • HomeBrew：
    其实这个已经在官网上介绍的很明确了，HomeBrew官网，总结来说配置只有一条：

    1
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    常用的指令有：
    安装：brew install xxx 安装xxx
    查找：brew search xxx 查找xxx

    有点类似cocoapod 查看更多指令可以使用 brew --help来查阅

  • Git:
    相信大家都很熟悉这个指令，在Mac上已默认自带
    也可以通过 brew install git 进行安装

  • NVM：
    NVM(Node Version Manager)Node版本管理器
    推荐-Git安装 安装步骤 :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    git clone https://github.com/nvm-sh/nvm.git .nvm

    cd ~/.nvm

    . nvm.sh
     
    export NVM_DIR="$HOME/.nvm"  
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm  
    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

    安装步骤(HomeBrew)：

    1
    2
    3
    4
    5
    6
    7
    brew install nvm

    mkdir ~/.nvm

    export NVM_DIR=~/.nvm

    . $(brew --prefix nvm)/nvm.sh

  • Node.js：
    安装：nvm install v8.16.2
    (PS:官网最新版本为：v13.0.1 - 2019/11/06)
    Nodejs官网

  • Hexo:
    安装：sudo npm install hexo-cli -g
    Hexo安装及使用

  • hoxo-deployer-git：
    自动部署发布工具（用来发布文章的）
    安装：npm install hexo-deployer-git --save

二、项目搭建：

Git仓库创建:

即创建个人博客仓库

git个人主页右上角 +号 -> New repository ->
Repository name设置格式：xxx.github.io * ( xxx 为自定义子域名) * -> Create repository

创建博客：

  • 选择目录： cd xxx-dir/

(其中xxx-dir为自定义文件夹，因为后面执行的流程会创建项目文件夹，放在根目录会显得根目录杂乱)

  • 创建Hexo项目：
    1
    hexo init blog

(其中blog，可以自定义，执行完成，即生成blog/ 文件夹项目)

  • 安装主题：
    我的博客使用的是NexT主题，更多主题可以点击此处查看：Hexo主题-查看更多
    以NexT为例：
    1
    2
    3
    cd blog/

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

修改配置：

项目配置：
修改 blog/_config.yml 文件的配置
(笔者使用的是Sublime Text，如果没安装的话可以使用vim进行修改)
参数说明:

title：二两白砂糖’s blog //标题
subtitle：树深时见鹿 //副标题
actor：PenguinAndy-二两白砂糖 //作者
language：zh-Hans //语言（zh-Hans 为简体中文）
theme:：next //主题（next）
deploy:

type：git //发布类型（git）
repo：https://github.com/userName/xxx.github.io.git //git仓库地址

主题配置：
修改blog/themes/next/_config.yml
参数说明：

menu: //菜单栏

home: /|| home //首页
#about: /about/ || user //关于
#tags: /tags/ || tags //标签
#categories: /categories/ || th //分类
archives: /archives/ || archive //归档
#schedule: /schedule/ || calendar //日程表
#sitemap: /sitemap.xml || sitemap //站地图
#commonweal: /404/ || heartbeat //公益404

Schemes //主题样式

scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

Sidebar Avatar //头像

/# in theme directory(source/images): /images/avatar.gif
/# in site directory(source/uploads): /uploads/avatar.gif
avatar: /images/header.JPG

写文章

在 blog/source/_posts/ 目录下创建新的md (markdown格式) 文件

1
cd blog/source/_posts/ && touch my_first_blog.md && vim my_first_blog.md

输入：

1
2
3
4
---
title: xxx
---
> xxxxxxxxxxxx

三、预览

启动hexo本地服务器：

1
hexo s

提示成功后，打开电脑浏览器，输入：https://localhost:4000 预览新文章内容

四、发布

4.1 生成静态网页并发布

逐条指令：

1
2
3
hexo clean  
hexo g  
hexo d

常用指令：

hexo clean //清除缓存
hexo g //生成静态网页
hexo d //将本地数据部署到远端服务器

也可以这样：

1
hexo clean && hexo g && hexo d

五、常见问题

同步问题：

Q：为什么我发布成功了，git上也有资源了，网页却没有变化？
A：因为git有缓存，git隔段时间才会渲染你最新的静态网页，需要耐心等几分钟

Q：hexo s无法开启本地服务器
A：cd 到项目目录进行hexo s

Q：每次重启Terminal 运行nvm/hexo 都会提示command not found
A：因为brew的bug的缘故.nvm文件夹中缺少必要文件，请选择git方式重新安装nvm，并将以下代码添加到.bash_profile下： 

export NVM_DIR="$HOME/.nvm"  
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm  
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

添加完成后运行:

source .bash_profile