GithubPages+Hexo搭建个人主页

Stella981
• 阅读 277

一些朋友基于GithubPages+Hexo搭建了个人博客,自己看了之后也进行了尝试,本文是对尝试过程的整理。

阅读指引

本文面向有一定基础的开发者,编辑于2018年5月,阅读请注意时效性。(重要信息会加粗,以节约阅读者时间)

成果展示:https://lichuangnk.github.io/可先查看成果以决定是否继续阅读

本文能给你带来什么

  • 对GithubPages+Hexo搭建个人主页的过程原理有较为清晰的认识
  • 成功搭建你的个人主页
  • 了解修改个人主页主题、内容的方法

GithubPages+Hexo基本原理

GithubPages: github作为项目托管网站,有一个pages功能,可以自定义页面内容,用来介绍相应的项目

Hexo: 博客框架,使用 Markdown(或其他渲染引擎)解析文章,生成静态网页

GithubPages+Hexo搭建个人主页原理:将Hexo生成的静态网页部署到Github作为Pages内容

GithubPages

官网:https://pages.github.com/

概念

GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.

类型

User/Organization Pages(个人或公司站点)

访问域名:https://username..github.io

发布分支:master

功能:一般用于个人博客/主页

Project Pages 项目站点

访问域名:https://username..github.io/项目名称

发布分支:master、gh-pages

功能:一般用于项目介绍

User Pages设置

  1. 创建一个和你的账号同名的仓库,仓库名:username.github.io
  2. 进入仓库Settings,找到GitHub Pages,设置Sourcemaster
  3. 保存后可以在GitHub Pages下可以看到:Your site is published at https://username.github.io/
  4. 当页面内容发布到仓库username.github.io后即可通过https://username.github.io/访问

Hexo

中文官网:https://hexo.io/zh-cn/

概念

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装

安装前提:已安装Node.js、Git(此处不作介绍)

如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。--官网

#安装Hexo命令行工具
$ npm install -g hexo-cli

项目创建

进入你想创建项目的文件夹,执行以下命令

#初始化项目
$ hexo init yourProjectName
#进入项目目录
$ cd yourProjectName 
#根据项目package-lock.json文件安装项目依赖包
$ npm install
#生成静态网页
$ hexo g # 或者hexo generate 
#开启本地服务,可以在http://localhost:4000/ 查看 
$ hexo s # 或者hexo server

Hexo布署到Github

一、更改项目布署配置

修改项目根目录中_config.yml文件的deploy项如下

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: Github仓库地址    #http or ssh
  branch: master    #个人主页的Pages必须为master分支

二、布署

执行以下命令进行布署

$ hexo clean #清除public
$ hexo g #生成静态网页
$ hexo s #开启本地服务,进行预览(不预览无需执行)
$ hexo d #发布到Github

三、访问

打开 https://username.github.io 即可进行访问

四、命令解释

  • hexo clean:清除public,当 source文件夹中的部分资源更改过之后,特别是对文件进行了删除或者路径的改变之后,需要执行这个命令,然后重新编译
  • hexo generate (hexo g): 编译,一般部署上去的时候都需要编译一下,编译后,会出现一个 public 文件夹,将所有的md文件编译成html文件
  • **hexo server (hexo s) : ** 启动本地web服务,用于博客的预览
  • **hexo deploy (hexo d) : ** 部署播客到远端(比如github, heroku等平台):部署博客到github上,如果一切顺利,你就通过访问usename.github.io访问你的博客了!

项目编辑

内容创建

  1. 进入source/目录下进行网页内容编辑
  2. 新建及修改页面:参考https://hexo.io/zh-cn/docs/writing.html

(本来想写,但是看了此官网页面觉得写了无实际意义)

主题更换

    1.  将主题clone到themes/文件夹(也可以是复制等其他方式)

    2.  修改根目录_config.yml的theme配置,例如

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-material  #你clone的主题名字(这个是我使用的)

    3.  重新布署查看即可

域名绑定(非必要)

Github Pages提供域名绑定功能,想尝试域名绑定的,可以进行尝试

可参考:https://www.zhihu.com/question/31377141

参考资料

https://hexo.io/zh-cn/

https://blog.csdn.net/sunshine940326/article/details/57413678

https://my.oschina.net/ryaneLee/blog/638440

https://segmentfault.com/a/1190000007071938

https://help.github.com/articles/what-is-github-pages/

https://www.zhihu.com/question/31377141

http://blog.xieyc.com/differences-between-a-record-and-cname-record/

点赞
收藏
评论区
推荐文章
浅梦一笑 浅梦一笑
6个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
刚刚好 刚刚好
6个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
小森森 小森森
3天前
租房类微信小程序-基于微信云开发-小程序端集成了管理员后台-一键部署,快速发布
温馨提醒本项目使用MITLicense协议,仅适用于学习交流,并且不提供无偿的、不提供无偿的、不提供无偿的维护修改服务(但可提issue)。若直接将本项目用于商用,因本项目带来的所有后果由使用者自行承担。如需商用升级版,请联系我微信,微信二维码在本博客页面右上角在此奉劝某些人,请尊重作者的劳动成果,做人积点德吧!最近发现有人拿我的源码进行二次分
小森森 小森森
3天前
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦【区别】:微信小程序的代码与QQ小程序的源码是不一样的。微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小
小森森 小森森
6个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
6个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
5个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_28799839 helloworld_28799839
6个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue