记录自己使用Hexo + Github搭建个人博客的过程

408 阅读6分钟

作为一个程序员,平常难免会遇到一些奇怪的问题要解决,或者因为业务需要要学习一些新技能。而能把这些经验整理并分享出来的载体,就属于个人博客了。(其实就是为了那种满足感)

第一步:环境搭建

1、安装node.js

安装node会自带npm,可以用来安装博客的一些插件,且node环境现在已经是前端开发必不可少的一部分了。

去Node.js官网选择对应的安装包,然后无脑next就安装完成了。(LTS:长期稳定版本;CURRENT:最新版本)

安装完成后打开命令行,输入以下命令检查是否安装成功

1、 node -v
2、 npm -v

如果出现了版本号就是安装成功了

2、安装git

Windows:

直接去官网下载并安装

Mac:

1、通过homebrew安装Git

  1. 如果未安装homebrew,先安装homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. 安装git
brew install git

2、通过Xcode安装

直接从AppStore安装Xcode,Xcode集成了Git,不过默认没有安装,你需要运行Xcode,选择菜单“Xcode”->“Preferences”,在弹出窗口中找到“Downloads”,选择“Command Line Tools”,点“Install”就可以完成安装了。

第二步:安装Hexo

当git和node都装好后,就可以开始初始化我们的Hexo项目了(git要等到部署博客的时候才使用到)

1、全局安装hexo-cli

npm install hexo-cli -g

安装完毕后继续使用hexo -v查看版本确认是否安装成功

2、初始化博客项目

进入到你的桌面,使用命令hexo init Blog(Blog是文件名,随便取什么都行)。初始化完成后会得到一个Blog文件夹,cd进入这个文件夹,使用npm install安装依赖。依赖安装成功后就可以使用hexo server或者npm run server把博客项目跑起来了

_run.png

当看到上图的信息时,按照最后一行的提示,打开浏览器进入http://localhost:4000就能看到生成的博客了,默认是下面这样

_blog.png

目前默认的样子肯定不是我们想要的,接着就可以根据自己的需求去修改博客的配置了。

如果不喜欢默认主题,可以看看官方网站上的提供的主题,或者去github上搜索hexo theme关键字搜索hexo的博客主题并使用。(这里推荐一下自己使用的博客主题 hexo-theme-matery,个人觉得很不错)

第三步:部署博客

Hexo提供了一个名为hexo-deployer-git的插件,可以一键把Hexo项目部署到github上。(这一步只用最简单的方法部署博客,如果不能满足需求可以自行搜索其他方法,这里就不放出其他方法的链接了,见谅)

1、没有github账号的话创建一个github账号

github上不去的话可以网上搜索一下host配置,或者方法1方法2

上面2个方法也是本人自己网上找的发布时间比较新的文章,不保证能用,但几乎所有的方法都是围绕的配置host实现。所以如果配置了host还是进不去github,那就是host的配置有问题 注: 配置完host之后最好关闭浏览器重新打开,或者强刷一下浏览器再尝试进入github

2、新建仓库

部署博客博客到仓库使用的是github pages。所以我们要先建立一个仓库用来放置我们的博客。

当github账号新建好并登录后,页面左边会有一个Repositories字样,点击旁边的new按钮新建仓库。创建仓库的名字是<你的 GitHub 用户名>.github.io。将来就可以通过这个名字访问到你的博客网站了。

3、生成ssh

这一步就不多说了,要想把代码成功推送到github上,这一步就不能漏。

首先打开命令行工具,输入以下命令:

// 配置用户名
1、git config --global user.uname '你的用户名'
// 配置邮箱
2、git config --global user.email '你的邮箱'
// 生成ssh
3、ssh-keygen -t rsa -C '你的邮箱'

碰到要确认的时候就按y,其他的一直回车,一般这样操作后就完成了。当告诉你ssh生成成功后,你电脑上会生成一个.ssh的文件夹,内容如下

_ssh.png

其中,id_rsa.pub就是我们所要的,把这个文件里的内容复制放到github上(点开github上的头像,选择Settings,进入SSH and GPG keys这一项,点击New SSH key新增ssh)

_add_ssh.png

标题随便取个名字,内容就粘贴上刚刚复制的id_rsa.pub的内容就大功告成了。

最后再去命令行,输入ssh -T git@github.com验证一下是否能连入github了.

_ssh_success.png

当出现这一行文字的时候就说明成功了!(如果出现了这一行文字上面还多出了一行的话,一般就是要让你配一下host,在host中添加多出来的那行提示中出现的ip, 如: 1111.111.11.1 github,然后再次输入ssh -T git@github.com就会发现那行提示不见了。好像多不多那行提示其实都不影响使用)

4、将hexo部署到github

首先先进入博客项目,输入下面的命令安装依赖

npm install hexo-deployer-git --save

接着找到项目根目录中的配置文件_config.yml划到最底部,修改其中的Deployment配置,如下

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]
参数描述
repogit代码库的地址
branch分支名称
message自定义提交信息

关于branch:一般来说,新建的代码库只会有master一条分支,所以branch填master就可以了。

关于repo:如果不知道代码库的地址的话,最简单的方法就是进入github,找到你要部署的代码库,点击code就能拿到代码库的地址了,如

_blog_depoly.png

当这一步的配置设置好后就可以开始部署了,输入以下命令

// 清除缓存
1、hexo clean
// 生成静态文件
2、hexo generate / hexo g
// 部署
3、hexo deploy / hexo d

_deploy_success.png

当看见Deploy done后,就说明已经部署成功了。还记得之前创建的仓库名吗? xxx.github.io。过一会儿就能通过这个地址访问到你博客了。

我自己在部署的过程中出现了报错443的现象,百度找了下解决方法,把部署配置的repo地址从https换成ssh的就好了

至此,你已经成功的搭建好了一个自己的博客,接下来就是写文章/个性化自己的网站了。完结撒花。

参考: