Github Pages介绍
本来用于介绍托管在Github上的项目,由于它的空间免费稳定,因此适合用来搭建博客。
每个帐号只能有一个仓库来存放个人主页,且仓库的名字必须是username/username.github.io。你可以通过http://username.github.io来访问你的个人主页
个人主页的网站内容是在master分支下
Hexo介绍
Hexo是一个快速、简洁高效的博客框架,具有如下特点:
- 生成静态网页
- 支持Markdown
- 一键部署博客到Github Pages
- 丰富插件
准备工作
- 下载git
https://git-scm.com/download/win - 安装git
- 下载node.js
http://nodejs.org/download/ - 安装node.js
安装hexo
在任意位置右键点击Git Bash Here
使用npm安装hexo,可以先切换npm源,加速安装过程
npm config set registry https://registry.npm.taobao.org
npm install -g hexo
【注】若安装不成功,可以使用npm install hexo –save再次安装
出现以下图示表示安装完成。
【注】若提示This package is no longer maintained,耐心等待安装即可。
配置Hexo
创建hexo文件夹
在某一文件夹下如F:\hexo\blog,右键Git Bash Here,使用以下命令创建建立网站需要的文件
hexo init
安装依赖包
npm install
生成静态文件
hexo generate #生成静态文件,会在当前目录下生成一个新的名为public的文件夹
启动Hexo
hexo server -p 5000 #使用hexo server 默认端口4000,会无法访问localhost:4000,因此改为5000端口
常用hexo命令
1 | hexo help #查看帮助 |
Github Pages
注册github账号
地址: https://github.com/
输入账号、邮箱、密码,然后点击注册按钮.–>之后验证邮箱
创建页面仓库
创建一个仓库,需要和帐号对应,格式yourname.github.io,创建仓库
关联本地与github
生成SSH密钥
任意地方右键Git Bash Here,执行以下命令
ssh-keygen -t rsa -C “你的邮箱地址”
出现Enter file in which to save the key (…..)直接回车选择默认位置
出现Enter passphrase(empty for no passphrase)直接两次回车不设密码以及确认
在Github上添加SSH密钥
打开id_rsa.pub,复制内容。
进入你的github页面,右上角找到setting,点击进去,找到ssh。
点击New SSH key
填写后点击Add SSH key
上传部署
目录结构
- deploy #需要部署的文件
- node_modules #Hexo插件
- public #生成的静态网页文件
- scaffolds #模板
- source #博客正文和其他源文件
- drafs #草稿
- posts#文章
- themes #主题
- config.yml #配置文件
部署
原理
- 上述步骤中在Github上创建的那个仓库username.github.io,可以通过该链接访问
- Hexo -g 会生成一个静态网站,第一次会生成一个public目录,这个静态文件可以直接访问
- 需要将Hexo生成的静态网站,提交(git commit)到github上
过程
需要在_config.yml中修改
1
2
3
4deploy:
type: git //注意:冒号后面有英文空格
repository: http://github.com/username/username.github.io.git
branch: master安装依赖包
npm install hexo-deployer-git –save
配置好之后执行
hexo genearte
hexo deploy
【注】以上命令执行的环境必须在执行hexo init创建的文件夹下执行
执行完以上命令,会出现页面输入你的github用户名和密码,验证后就可以上传成功
访问 username.github.io,成功打开页面即部署成功
新建文章
hexo new “postname”
该命令会自动在hexo/source/_post文件夹下创建一个名为postname的markdown文件,会自动在文件开头添加1
2
3
4
5---
title: 你的题目
tags: 你的标签
category: 你的分类
---
填写tags,category,新建标签页面和分类页面后即可以显示相应的标签和分类
新建标签页面
hexo new page tags
该命令会自动在hexo/source文件夹下创建tags文件夹并在该文件夹下创建index.md文件。
修改index.md文件,添加以下两项
layout: tags
comments: false
新建分类页面
hexo new page categories
该命令会自动在hexo/source文件夹下创建categories文件夹并在该文件夹下创建index.md文件
修改index.md文件,添加以下两项:
layout: categories
comments: false
最后我们hexo g -d 一把,打开自己的页面查看
以下是博主的博客链接 欢迎访问 https://liuziqiao.github.io