hexo+github快速高效搭建一个自定义页面作为首页的博客


前言

    先从标题来说,为什么说是快速高效呢?因为我已经把大部分坑都踩过了,是不是很贴心,哈哈,在会出现错误的地方我会给予相应的提示和出错解决方法,这样可以减少不必要的解决bug的时间,废话少说,下面开始吧。

准备工作

1、构建git环境
    构建git环境是指本地安装git软件以及与远程github相连,如果这一步已经完成了的可以进入下一步,如果未完成的请点击这里
2、安装node.js
    安装Node.js(傻瓜式安装一键到底)
3、搭建hexo环境 (官方教程请点击这里


1、使用第一步安装好的Git Bash工具,输入:
npm install -g hexo-cli 

安装hexo,如图
注:如果产生错误提示:
npm command not found

则说明一种可能是你第二步安装Node.js的配置未生效,可以先到本地电脑属性 → 高级系统设置→环境变量→path中查看是否有Node.js软件的安装路径(eg: C:\Program Files\nodejs),如果忘记安装的位置就重启一下电脑系统自动会配置。
  2、hexo init 地址,初始化一个工作空间,地址随便填写也可以不写,不写就是在当前目录下创建(建议创建一个目录),尽量短些,因为后续很多操作是需要在这个工作空间执行的,避免切换目录输入的麻烦。
  3、输入命令 cd 地址,切换到刚才你初始化的工作空间
  4、安装npm,输入命令 :
 npm install

  注:常见错误:
1、部署的时候提示找不到git
解决方法:npm install hexo-deployer-git –save

2、执行hexo server提示找不到该指令
解决方法:npm install hexo-server –save    

快速开始


  首先先理清楚自己的需求,我们需要的是做一个具有自定义页面作为首页的博客,因此需要在github中创建两个仓库,一个仓库是放自定义页面,另一个是放博客主页的。  先别着急一个一个来,首先先创建一个放自定义页面的仓库。

1、进入github中点击New repository,名字为:xx.github.io,其中xx要与Owner一致。


2、点击Settings并在GitHub Pages中点击Choose a theme,进入后随便选择一个主题,没关系因为之后都是要被替换成你自己的自定义页面。


  完成以上操作的时候,你的仓库中就会是这样的效果。


  之后就需要你自己设计一个页面然后将仓库的文件替换,我的仓库的效果图如下。


注:git操作:先进入你初始化的git工作空间,(如果忘记了在哪里了,可以重新初始化一个,输入命令:git init 地址)



使用命令可以查看一下工作空间存在的文件信息:

ls -a

输入命令可以查看当前有哪些远程库以及与那个github仓库连接:

git remote -v

创建一个远程库以及与github仓库连接:

git remote add origin ssh(origin是指起的远程仓库名称可以随便起,ssh指的是你仓库的地址详情如下图)

完成后可以将你需要上传的文件添加到暂存区中:

git add xx

添加完成后使用命令:

git status   //查看是否添加成功,绿色标识已经添加到暂存区了

使用命令:

git commit -m "第一次提交"   //提交到本地库中

最后在使用:

git push origin master    //推送到github远程仓库中  

  如果以上步骤都成功了,那么现在可以开始创建第二个仓库也就是作为博客主体使用的,同样在github中新建一个仓库,这里的仓库名称是可以随便取,例如我取的名称是:blog,然后选一个主题,现在在github上的操作就已经完成了,那么现在回到本地进入hexo工作环境中,如下图


,打开_congfig.yml文件,搜索关键字:url,对url和root进行配置(千万注意yml文件的格式很规范,不准使用tab键,冒号后面空1格,缩进是空2格,千万记住,设置错误找都找不到出错在哪里),例如:

url: https://主页的名称/主体博客的名称  
root: /主体博客的名称/  

此时已经完成前半部分配置,接下来搜索:deploy关键字,将hexo部署到哪里去,例如:

deploy:  
  type: git    //部署方式  
  repository: https://github.com/ForeverLTP/log.git    //repository是指你主体博客仓库的地址  
  branch: master  //提交到master分支上  

以上配置完成,现在可以将hexo部署到github中,使用命令:

hexo c   //等待完成后
hexo g   //等待完成
hexo d   

这样基础的具有自定义页面的基础博客就完成了。

总结


1、注意yml文件的格式
2、后续主体优化(网上很多教程)的时候相对路径记住是要多加一个路径,因为我们是有个自定义主页的,路径其实就是博客主体仓库的名称
3、对git工作区、暂存区、本地库、远程仓库稍微理解一下,否则会遇到很多git上的错误。