基于Hexo+Github构建个人博客(一)
2017-11-06 21:10
232 查看
越来越多的小伙伴不满足于在现有的博客网站上写文章,想完全根据自己的喜好构建一套,程序员可以互相交流技术,文青也可以彼此交换想法。基于Hexo+Github是目前采用比较多的方式,Hexo重要的特点是拥有丰富的官方文档、插件和主题等,所以本文就来介绍如何一步步构建构建自己的博客网站。
环境准备,首先确认是否安装以下软件
Node.js
Git
安装Hexo
初始化Hexo。
继续执行。
新建一篇文章。
新建文章位于../blog/source/_posts/first-article.md。
生成网站。
启动本地服务器
浏览器登录http://localhost:4000,即可查看自己刚发布的文章,Ctrl+C会停止服务。
安装部署工具
修改配置文件_config.yml,位于../blog/_config.yml,在文件最后修改配置信息如下:
部署
等部署完之后,登录https://vosang.github.io/就可以看到效果了。
下载主题,将主题包下载到themes文件夹下,可以看到文件里面就是Hexo默认的主题包。
可以看到themes文件夹下面除了默认主题外又多了一个文件夹maupassant。
安装依赖。
修改配置文件_config.yml,设置theme。
选择语言,该主题默认情况下是英文,如果要改为中文,修改配置文件_config.yml
进入到../blog/themes/maupassant/languages文件下,发现里面是各种yml文件,这里就是语言包,根据文件的名字来选择语言,比如选择中文就是采用zh-CN.yml作为映射文件。
默认是没有”关于”页面的,下面来新增关于页面。
可以看到生成一个source文件夹下面新生成了一个about文件夹,直接编辑index.md文件,具体路径是~/blog/source/about/index.md。
再次部署,就可以看到了一个博客的雏形了。下面再具体介绍如何发布文章以及一些细节问题,比如设置文章摘要、类别和标签等。
基于Hexo建站
本人采用的环境为mac,其他环境下的操作步骤也比较类似,安装过程中有遇到问题可以自行搜索,也可以在文章下面留言。环境准备,首先确认是否安装以下软件
Node.js
Git
安装Hexo
npm install -g hexo-cli
初始化Hexo。
# 设置用来放置博客的文件夹blog hexo init blog
继续执行。
cd blog && npm install
新建一篇文章。
hexo new "first article"
新建文章位于../blog/source/_posts/first-article.md。
生成网站。
hexo generate # 或者 hexo g
启动本地服务器
hexo server # 或者 hexo g
浏览器登录http://localhost:4000,即可查看自己刚发布的文章,Ctrl+C会停止服务。
部署在Github
在Github上新建一个仓库,仓库名称格式为“用户名”.github.io,比如vosang.github.io。安装部署工具
npm install hexo-deployer-git --save
修改配置文件_config.yml,位于../blog/_config.yml,在文件最后修改配置信息如下:
# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: git@github.com:Vosang/vosang.github.io.git branch: master
部署
hexo deploy # 或者 hexo d
等部署完之后,登录https://vosang.github.io/就可以看到效果了。
安装主题
Hexo官网提供了丰富的主题,主题地址。本人选了一款具有简洁风格的主题—Maupassant(莫泊桑),在此要谢谢原作者。网站效果。下载主题,将主题包下载到themes文件夹下,可以看到文件里面就是Hexo默认的主题包。
cd blog git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
可以看到themes文件夹下面除了默认主题外又多了一个文件夹maupassant。
drwxr-xr-x 12 vosang staff 408B 10 29 14:18 landscape drwxr-xr-x 11 vosang staff 374B 10 29 14:50 maupassant
安装依赖。
# 现在jade已经被pug替换,所以直接安装pug # npm install hexo-renderer-jade@0.3.0 --save npm install hexo-render-pug --save npm install hexo-renderer-sass --save
修改配置文件_config.yml,设置theme。
# 修改主题名称 # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ #theme: landscape theme: maupassant
选择语言,该主题默认情况下是英文,如果要改为中文,修改配置文件_config.yml
# 设置语言 language: zh-CN
进入到../blog/themes/maupassant/languages文件下,发现里面是各种yml文件,这里就是语言包,根据文件的名字来选择语言,比如选择中文就是采用zh-CN.yml作为映射文件。
默认是没有”关于”页面的,下面来新增关于页面。
# 新增一个about页面 hexo new page "about"
可以看到生成一个source文件夹下面新生成了一个about文件夹,直接编辑index.md文件,具体路径是~/blog/source/about/index.md。
再次部署,就可以看到了一个博客的雏形了。下面再具体介绍如何发布文章以及一些细节问题,比如设置文章摘要、类别和标签等。
相关文章推荐
- 基于Hexo+Github构建个人博客(二)
- 【Hexo】Hexo+Github构建个人博客 (一):环境配置
- 【Hexo】Hexo+Github构建个人博客 (三):添加皮肤主题
- 【Hexo】Hexo+Github构建个人博客 (二):创建Hello World
- 【Hexo】Hexo+Github构建个人博客 (五):错误集
- 【Hexo】Hexo+Github构建个人博客 (四):添加讨论等功能
- 【Hexo】Hexo+Github构建个人博客入门
- 关于基于hexo+github搭建个人博客的问题
- 基于GitHub和Hexo搭建个人博客
- hexo+github搭建个人博客(超详细教程)
- 基于bootstrap构建在github上的个人学习网站
- Hexo+github搭建个人博客
- 最简便的方法搭建Hexo+Github博客,基于Next主题
- Hexo+GitHub搭建个人博客
- Hexo+github搭建个人博客-博客初始化篇
- 基于github page和hexo搭建个人博客
- Hexo+Github搭建个人博客(一)——开始搭建
- 使用Github Pages和Hexo构建个人博客
- Hexo+github搭建个人博客-博客初始化篇
- hexo+github搭建个人博客