Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

记录博客主页的搭建(一)

1.心血来潮

有一个自己的网站,是我心中一直存在的一个想法,因最近学业压力不是很大,碰巧看到阿里云的域名首年特惠只要一元,就顺便买了一个域名,准备着手搭建个人网站,在此之前,我对博客网站几乎是没有过了解,所以在查阅了一些资料之后,以Hexo+Github Page的方式进行我的网站的搭建,以下就是具体的过程。

2.搭建过程

相关的搭建过程网上随便一找就有很多,我这里只是对我建站的过程进行记录,具有一定参考价值。

2.1 下载node.js以及git并安装

在使用Hexo框架进行搭建网站之前,首先要下载安装node.jsgit,以便于安装Hexo以及代码的管理。

具体的安装注意事项

  1. Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本
  2. 使用 Node.js 官方安装程序时,请确保勾选 Add to PATH 选项(默认已勾选)
  3. 对于中国大陆地区用户,可以前往官网或者淘宝Git for Windows镜像下载 git 安装包(仅针对Windows)
  4. 安装完毕以上两个软件之后就可以进行Hexo的安装了

    2.2 安装Hexo

    在想要安装Hexo的位置右键打开Git Bash Here通过命令行来进行安装,输入以下命令
    1
    npm install -g hexo-cli
    点击回车即可进行安装,然后安装完成之后进行一下初始化
    1
    2
    hexo init
    npm install
    分别输入以上两句并回车,就会生成初始的菜单,大概的目录是这样子的
    1
    2
    3
    4
    5
    6
    7
    8
    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    | ├── _drafts
    | └── _posts
    └── themes
    下面是各个目录的具体功能:

config.yml
网站的配置信息,可以在此配置大部分的参数。后面发布到github上面时,有用到这个文件;
package.json
应用程序的信息
source
是网站中一下资源的文件夹,博客内容也都放在这里
themes
网站主题的放置的位置

其他更具体的介绍可以参考官方文档

2.3 预览Hexo博客

此时就可以预览自己搭建的博客了,但是所有东西都是初始的,输入以下的命令即可

1
2
npm install hexo-server --save
hexo server

以上命令同样是在Git Bash Here中输入
然后在浏览器网址栏输入localhost:4000
如果以上项目能启动就说明成功了,接下来将项目搭建到GitHub上面

2.4 将项目部署到GitHub

  1. 在GitHub中新建一个仓库,然后命名为用户名.github.io,只有这样子GitHub才会将其设置为用户的博客This is a picture without description

因为我已经有一个库了,所以显示错误

  1. 将本地搭建好的hexo发布到github上

首先输入以下代码安装一个插件

1
npm install hexo-deployer-git --save

修改网站配置文件_config.yml,添加deploy信息

1
2
3
4
deploy:
type: git
repo: git@github.com:用户名/用户名.github.io.git
branch: master(也就是想要上传的分支)
  1. 生成SSH key

在git中输入以下命令

1
ssh-keygen -t rsa -C "your_email@example.com"

然后会提示输入passphrase(本步骤可以跳过),相当于设置一个密码,之后跟github进行操作时都会要求输入密码,避免误操作
然后将新生成的key添加到ssh-agent中

1
ssh-add ~/.ssh/id_rsa

就可以在上面的路径下找到ssh的文件了This is a picture without description

  1. 将ssh添加到GitHub中

打开id_rsa.pub文件将一整串公钥拷贝下来
打开GitHub的个人设置界面,按照以下图片的步骤进行添加ssh
This is a picture without description

title随意,key填id_rsa.pub文件中内容,然后保存即可。
至此,就成功将ssh添加到github中了

  1. 测试是否连接成功

输入以下命令

1
ssh -T git@github.com

如果出现以下文字就说明连接成功了

1
Hi wispyoureyes! You've successfully authenticated, but GitHub does not provide shell access.
  1. 上传静态文件

成功与GitHub建立连接之后,就可以生成静态文件上传到github中了

1
2
3
hexo clean  //清除缓存文件db.json和已生成的静态文件public
hexo g //生成网站静态文件到默认设置的public文件夹
hexo d //部署网站到设定的仓库

然后再网址栏输入GitHub仓库的名称就可以访问了

3.绑定域名

  1. 首先到阿里云或者其他的云服务商购买一个域名
  2. 然后进行域名解析
  3. 登陆阿里云控制台,选择域名选项,添加两条CNAME解析
  4. 然后在GitHub的仓库设置中,下滑找到Github Pages ,点击进去,在Custom domain里填入你的域名,然后点击Save,稍等一会就好了。
  5. 然后就可以通过你的域名来进入博客了

关于备案,如果要部署到国内的服务器上面需要进行备案,从哪里买的域名就从哪里备案GitHub属于国外的服务器,是不用进行备案的

4.相关链接

生成ssh

Hexo官方文档

阿里云

淘宝git for windows 镜像

淘宝node.js镜像