前言

对于一个小白来说，第一次建立自己的个人网页还真是一件既兴奋又无奈的事情。兴奋是因为你即将有一个属于自己的平台，可以将自己的感悟、收藏、简历等文章保存起来，也可以分享给他
人。无奈是因为，在你搭着搭着，你会发现出现了各种各样的问题，这其中包含你的一些个性却
没法实现的需求以及半路杀出的各种bug。不过，经历一番麻烦，也是会留下深刻的印象的。

需求

说到建立网站，不得不考虑不同人出于不同的需求，来走自己的网站路线。可是，对于小白们或者不干网站这方面的大佬们来说，做一个又显得费劲。而我想我的需求跟大部分人一样，当然我的实现也是比较low的一种。我没有买域名，也没有租服务器，而是蹭github的github page，具体创建仓库的教程网上都有详细概述。
而下面的两个配置路线有两个优点
1. 有成型的网页模板，会让你的主页逼格瞬间提升一个档次。
2. 方便后续更新维护你的网站。

github page建网页路线

GitHub Pages + Hexo
GitHub Pages + jekyll
我采用的搭建博客的方式是第一种，建议Windows用户走第一种。
因为我先走的第二种，走到一半卡死了，cmd窗口出现毫无头绪的错误，网上也找不到什么解决方案。当然你也可以勇于尝试，毕竟机子不同嘛。
接下来我们先说第一种

Hexo配置

下载Node.js

其中 LTS为稳定版本，Current为当前最新版本

下载git

下载完配置账户，及ssh等，这里有详细介绍git配置

安装Hexo及初步预览

网上大多hexo的配置都是以前版本的指令了，最新的还要参考Hexo官网
任意位置右键选择Git Bash Here(即打开git的命令窗口)
$ npm install -g hexo-cli
接下来找一个你要建立网站的目录，在它的上一级git bash here，执行命令

$ hexo init <folder>  
$ cd <folder>  
$ npm install

此时你的界面应该是这样的

avatar

下面我们测试一下环境搭的怎么样
hexo g
原为generate缩写为g，意为生成，在hexo官网上有详细的说明
‘hexo s’
原为server缩写为s，提交到本地服务器进行查看
当你看到这个界面

avatar

就说明你测试成功啦，恭喜，就可以到http://localhost:4000/查看你已经初步搭建的网页预览图啦。
如果你的目的达成了，那么下面就不需要继续看下去了，想有不同风格的主题往下看。

网站主题

寻找主题

当我们看到预览图，肯定会有些小兴奋，不过冷静，事情还没办完。
留心查看一下，你会发现根目录下有个themes的文件夹，我们下面自己下载的主题就放到这个目录下面
现在，到hexo主题平台选择自己喜欢的主题吧，样式非常多，有的挑了。

下载主题

下载主题两种方式.
1. 第一种是点开主题的github界面，按照README.txt中的指令，在刚刚提到的themes目录下操作
2. 第二种是github界面右上角下载”clone and download” 下完之后放到themes目录下

配置主题

其实不只是配置主题，对Github页面的大部分编辑操作都涉及到根目录下面的_config.yml文件，将其中的themes后面的值改为对应主题文件夹名称。
注意中间的空格不能丢，会报错的

编辑页面

之后就根据不同主题的风格进行操作了，主要结合hexo官方文档以及对应主题github下readme.txt的说明来完成。最好下个sublime text 3
编辑文本会非常方便，单纯用txt打开会遇到编码乱码问题，不利于后续文本的编辑
至于编辑，你还得会markdown，所以把东西很多，都得会，不过markdown非常简单，作为程序员你不得不用它，因为它确实很牛，sublime中可以下载markdown编辑插件，详细见教程Sublime Text3 + Markdown + 实时预览个人觉得这比网页里面预览方便多了。
注意：所有的操作都在你网站目录下的git bash中完成

提交修改三步走

hexo g
hexo s
hexo d

其中hexo d是部署到github上去的，要是没弄好，先前两步多走几次，多预览几下，再提交到github。

github page网站配置分享到此结束，感谢查看。

转载请注明出处：https://blog.csdn.net/weixin_42474261/article/details/81502182

参考

整体说明: https://blog.csdn.net/tianbo_zhang/article/details/79137103
官方文档: https://hexo.io/zh-cn/docs/
hexo主题：https://hexo.io/themes/
hexo_config.yml配置示例：https://www.cnblogs.com/littlewriter/p/7229094.html
markdown基本语法：https://www.jianshu.com/p/191d1e21f7ed
sublime text 3下载地址：https://www.sublimetext.com/3

markdown实时预览：https://www.cnblogs.com/james-lee/p/6847906.html

github page + hexo搭建个人网站详细教程

前言

需求