个人博客搭建

发表于 | 分类于
字数统计: 1.1k 字 | 阅读时长 ≈ 4 分钟

Hexo + Github + Window 个人博客搭建步骤记录+优化

一、简介

Hexo+GitHub+Window

二、新建Github仓库

前置条件：拥有Github账号
新建一个与账号名相同的仓库，如仓库名：GitHub账号名.github.io

三、安装Git

网址，由于官网下载速度较慢，一般都下载不成功，所以选用国内镜像下载，下载后默认安装

五、安装Node.Js

网址，默认安装就行

六、安装Hexo

前置条件：安装好Git和Node.Js
安装步骤官方说明网址，这里是在Window下进行安装

1.安装Hexo到文件夹

Hexo网址，获取快捷安装命令

1
$ npm install hexo-cli -g

新建文件夹，命名为Github账户名.github.io，点击文件夹，右键Git Bash Here，输入上面命令，接着输入下面命令

1
$ npm install hexo --save

然后

1
$ hexo -v    //查看hexo版本，检验是否安装成功

2.初始化网站

安装好Hexo后，使用下面命令（同样是在账户名.github.io目录下进行）

1
2
3
4
$ hexo init
$ npm install  //安装依赖
$ npm install hexo-server --save  //搭建本地服务器所需插件
$ npm install hexo-deployer-git --save  //使用git方式进行部署博客所需插件

所需文件生成后，根据网址了解每个文件的含义

3.生成静态网页

输入下面命令

1
2
$ hexo g  //生成静态页面
$ hexo server  //启动服务器，若成功，访问http://localhost:4000即可看到网页

七、Git与Github关联

前置条件：安装好Git、创建好Github仓库

1.设置账号信息

输入下面命令

1
2
$ git config --global user.name "your Github_Name"
$ git config --global user.email "your_email@youremail.com"

2.检查电脑上是否存在SSH key

1
$ cd ~/.ssh

3.备份并移除原来的SSH key设置(如果不移除，新生成的ssh key也可以覆盖原来的)

1
2
3
4
5
$ ls
config	id_rsa	id_rsa.pub	known_hosts
$ mkdir key_backup
$ cp id_rsa* key_backup
$ rm id_rsa*

4.生成新的SSH key

1
2
3
$ ssh-keygen -t rsa -C "邮件地址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>

系统会要求输入加密串（可以不输，直接回车，这里输入的密码用于本地上传文件到Github上时验证）

1
2
Enter passphrase (empty for no passphrase):<输入加密串>
Enter same passphrase again:<再次输入加密串>

若出现the key's randomart image is:则生成SSH key 成功

5.添加SSH key到Github

用文本编辑工具打开id_rsa.pub文件，这个文件在C盘->用户名->.ssh文件夹里面，文件内容就是上一步生成的SSH key，复制下来。
打开Github创建的仓库，点击Setting，点击左边选项栏Deploy keys，将刚才复制的内容粘贴到key一栏
Allow Write Access打上勾

6.测试是否成功

输入下面命令

1
$ ssh -T git@github.com

程序会询问你，此时输入yes,如果输入后出现了包含Hi的欢迎字样，则成功

八、部署到Github

修改项目文件夹里的_config.yml，设置如下：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:账户名/账户名.github.io.git
  branch: master

注意这里冒号后面要空一个字符
Git Bash 定位到本地博客，输入下面命令

1
2
3
$ hexo g  //生成静态页面
$ hexo server  //启动服务器，若成功，访问http://localhost:4000即可
$ hexo deploy  //部署

九、域名绑定

1.点击Github的setting

找到GitHub Pages里的Custom domain，填上域名，这时候项目根目录应该会出现一个名为CNAME的文件了。打开本地博客/source目录，新建CNAME文件，注意没有后缀。然后在里面写上你的域名（如:test.com,不需要添加http/www等前缀），保存。最后运行hexo g、hexo d上传到github

2.根据IP地址添加解析

打开cmd,Ping 账号名.github.io,获得IP地址
添加A类型，主机记录分别为@和WWW的两条解析，记录值为上面IP地址

3.测试

访问网址，确认是否成功

十、网站优化

1、博客文章无法显示图片

原因

上传的markdown中引用的是电脑本地的图片，而这些图片并没有上传到GitHub上，所以无法显示图片

解决办法

  1. 修改系统配置文件中post_asset_folder为true，此时新建博客后，会出现一个和文件同名的文件夹
  2. 安装插件：npm install https://github.com/CodeFalling/hexo-asset-image --save
  3. 文章在引用图片时，采用相对路径

此办法将图片也上传到GitHub上，并用相对路径来调用图片，问题解决。

------------- End -------------