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

前言


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

需求


说到建立网站,不得不考虑不同人出于不同的需求,来走自己的网站路线。可是,对于小白们或者不干网站这方面的大佬们来说,做一个又显得费劲。而我想我的需求跟大部分人一样,当然我的实现也是比较low的一种。我没有买域名,也没有租服务器,而是蹭github的*github page*,具体创建仓库的教程网上都有详细概述。
而下面的两个配置路线有两个优点

  1. 有成型的网页模板,会让你的主页逼格瞬间提升一个档次。
  2. 方便后续更新维护你的网站。

github page建网页路线


  1. GitHub Pages + Hexo
  2. 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   
$ cd   
$ npm install  

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xpq2HJvN-1581820256256)(http://op1ybr0zi.bkt.clouddn.com/mulu.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1hbWYIu-1581820256261)(http://op1ybr0zi.bkt.clouddn.com/hexos.png)]

就说明你测试成功啦,恭喜,就可以到*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

你可能感兴趣的:(web前端,windows,hexo,github,page,blog)