使用Gitee+Hexo搭建个人博客
文章目录
为何使用Gitee而不是GitHub
目前国内访问GitHub速度慢,还可能被墙,所以Gitee来构建个人博客。Gitee类似国内版的GitHub,访问速度有保证。
环境要求
- Git
- NodeJs
默认你已经安装了Git 和 NodeJS (推荐使用cnpm)
传送门:(Git安装教程) (Nodejs安装教程) (cnpm使用教程)
开始搭建
1. 安装Hexo
打开 shell 终端,输入命令`npm install -g hexo`
1 | $ sudo cnpm install -g hexo |
注:如果提示权限错误,命令前加sudo
,cnpm
是淘宝的开源镜像,国内访问比npm
快。
2. 初始化Hexo
在你的电脑上创建Hexo
文件夹,在shell终端中切换到Hexo
目录,输入命令 hexo init
1
2
3
4
5
6
7
8
9
10
11
12
13
14$ cd /work/Hexo
/work/Hexo $ hexo init
INFO Cloning hexo-starter to /work/Hexo
Cloning into '/work/Hexo'...
remote: Counting objects: 65, done.
remote: Total 65 (delta 0), reused 0 (delta 0), pack-reused 65
Unpacking objects: 100% (65/65), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into '/work/Hexo/themes/landscape'...
^Cwarning: Clone succeeded, but checkout failed.
You can inspect what was checked out with 'git status'
and retry the checkout with 'git checkout -f HEAD'
INFO See you again
初始化完成后Hexo
的目录结构:
3. 获取博客主题
安装样式解析:npm install hexo-renderer-scss --save
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19$ npm install hexo-renderer-scss --save
> node-sass@4.9.3 install /Users/wang/HexoNew/node_modules/node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.3/darwin-x64-64_binding.node
Download complete ░⸩ ⠋ :
Binary saved to /Users/wang/HexoNew/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Caching binary to /Users/wang/.npm/node-sass/4.9.3/darwin-x64-64_binding.node
> node-sass@4.9.3 postinstall /Users/wang/HexoNew/node_modules/node-sass
> node scripts/build.js
Binary found at /Users/wang/HexoNew/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Testing binary
Binary is fine
+ hexo-renderer-scss@1.2.0
added 187 packages from 167 contributors and audited 3576 packages in 24.221s
found 0 vulnerabilities
克隆主题:git clone https://gitee.com/xiuxiuing/hexo-theme-even themes/even
1
2
3
4
5
6
7/work/Hexo $ git clone https://gitee.com/xiuxiuing/hexo-theme-even themes/even
Cloning into 'themes/even'...
remote: Counting objects: 136, done.
remote: Compressing objects: 100% (123/123), done.
remote: Total 136 (delta 4), reused 128 (delta 2)
Receiving objects: 100% (136/136), 264.27 KiB | 556.00 KiB/s, done.
Resolving deltas: 100% (4/4), done.
克隆完成后,在/Hexo/themes
目录下,可以看到 landscape
和even
两个文件夹。
我们所要使用的主题都是放在这个目录下,Hexo默认使用的是landscape
主题,由于第二步Hexo初始化时主题没有clone成功,所以我们这一步克隆了even
主题,接下来会使用even
主题进行演示。
想获取更多主题,可在网站:https://hexo.io/themes/ 选择自己喜欢的主题,按照此步的步骤clone下来。
4. _config.yml对博客进行基础配置
_config.yml文件修改,保存
5. 本地预览博客
编译项目,输入命令:hexo g
运行项目,输入命令:hexo s
1
2
3
4
5
6
7
8
9
10
11
12$ hexo g
INFO Start processing
INFO Files loaded in 186 ms
INFO Generated: archives/2018/08/index.html
INFO Generated: archives/index.html
INFO Generated: archives/2018/index.html
INFO Generated: index.html
INFO Generated: 2018/08/08/hello-world/index.html
INFO 5 files generated in 242 ms
$ hexo s
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
在浏览器中输入http://localhost:4000/`
就可以看到效果啦
部署博客到Gitee上
1. 创建Gitee账号
到码云:https://gitee.com/ 上申请注册账号,码云类似国内版的GitHub,所以操作界面跟GitHub差不多,多了一些国产化的东西,这里不做更多介绍了,自己研究下。
2. 创建项目
创建完成后,在项目中复制项目地址。
3. 在_config.yml中配置Git
1 | deploy: |
注意:冒号后面一定要有空格,否则不能正确识别。
4. 发布到Gitee
输入命令npm install hexo-deployer-git --save
安装自动部署发布工具
输入命令hexo clean && hexo g && hexo d
发布博客,首次发布需要在shell中输入账号和密码。
5. Gitee Pages设置
在项目的服务中选择Pages选项
选择 master分支,点击 部署/更新
稍等一会儿博客就发布成功啦,访问博客地址:https://xiuxiuing.gitee.io/blog,就可预览在线博客啦!!!
如果博客的样式不对,则需要在_config.yml中配置下博客地址和路径:1
2url: https://xiuxiuing.gitee.io/blog/
root: /blog
再执行命令hexo clean && hexo g && hexo d
就可以啦。
至此,我们的博客就搭建完成啦!!!
在/Hexo/source/_posts
目录下就可以写我们的博客啦!!!
个人博客效果参考:https://xiuxiuing.gitee.io/blog/
觉得不错,麻烦帮忙分享给朋友,谢谢各位啦
欢迎扫码关注公众号,更好的交流
原文作者: xiuxiuing
原文链接: https://xiuxiuing.gitee.io/blog/2018/08/08/giteepage/
许可协议: 知识共享署名-非商业性使用 4.0 国际许可协议