GithubPages+Hexo搭建个人主页

一些朋友基于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/

猜你喜欢

转载自my.oschina.net/u/2393003/blog/1809221