欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-17 18:45:51
...

前言


对于一个小白来说,第一次建立自己的个人网页还真是一件既兴奋又无奈的事情。兴奋是因为你即将有一个属于自己的平台,可以将自己的感悟、收藏、简历等文章保存起来,也可以分享给他
人。无奈是因为,在你搭着搭着,你会发现出现了各种各样的问题,这其中包含你的一些个性却
没法实现的需求以及半路杀出的各种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 <folder>  
$ cd <folder>  
$ npm install  

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

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

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

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

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