本文主要是介绍利用Github Pages+Hexo搭建个人博客,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
技术简介
Github Pages
GitHub Pages 本来用于介绍托管在Github上的项目,由于它的空间免费稳定,因此适合用来搭建博客。
每个帐号只能有一个仓库来存放个人主页,且仓库的名字必须是username/username.github.io
。你可以通过http://username.github.io
来访问你的个人主页
个人主页的网站内容是在master分支下
Hexo
Hexo是一个快速、简洁高效的博客框架,具有如下特点:
- 生成静态网页
- 支持Markdown
- 一键部署博客到Github Pages
- 丰富插件
七牛云
使用七牛云作为图床。
认证后的七牛云存储提供10G的免费空间以及每月10G的流量
配置环境
Git
安装Git
进入网站https://git-scm.com/
下载安装即可
Node.JS
安装Node.JS
进入网站https://nodejs.org/en/
,下载安装即可
Hexo
安装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命令
hexo help #查看帮助
hexo -v #查看本地环境
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo gernerate #生成网页,可以在public目录查看整个网站的文件
hexo server #本地预览 Ctrl+C关闭
hexo deploy #或hexo d 部署到远端如github、heroku
hexo clean #清除缓存 建议每次执行命令前先清理缓存,每次部署前先删除 .deploy文件夹
#常用缩写
hexo n #hexo new
hexo g #hexo generate
hexo s #hexo server
hexo d #hexo deploy
#常用组合
hexo d -g #生成部署
hexo s -g #生成预览
操作流程
Github Pages
创建页面仓库
创建一个仓库,需要和帐号对应,格式yourname.github.io
,创建仓库
生成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
,复制内容。
进入https://github.com/settings/ssh
。
点击New SSH key
填写后点击Add SSH key
Hexo
目录结构
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
中修改
deploy:type: gitrepository: http://github.com/tianwenyu/tianwenyu.github.io.gitbranch: master
【注】
repository:
后面的tianwenyu/tainwenyu.github.io.git
要与自己创建的仓库名保持一致
.yml
文件对格式要求严格,type:
repository:
branch:
前面两个空格,冒号后面一个空格
安装依赖包
npm install hexo-deployer-git --save
配置好之后执行
hexo genearte
hexo deploy
【注】以上命令执行的环境必须在执行hexo init
创建的文件夹下执行
执行完以上命令,会出现页面输入你的github用户名和密码,验证后就可以上传成功
访问tianwenyu.github.io
,成功打开页面即部署成功。
配置
选择的主题为indigo,具体问题可以看链接。
安装主题
安装前确认你的Hexo版本在3.0以上,以及Node版本为6.x以上,在Hexo根目录,执行以下命令
git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo
安装依赖
安装
Less
npm install hexo-renderer-less --save
安装
Feed
npm install hexo-generator-feed --save
安装
Json-content
npm install hexo-generator-json-content --save
安装
QRCode
npm install hexo-helper-qrcode --save
启用主题
编辑站点配置文件hexo/_config.yml
搜索theme
,修改为theme: indigo
基本配置
修改以下内容
title: your title
subtitle: your subtitle
description: your description
keywords: your keywords
author: your name
email: your email
url: your site url
indigo
主题配置
编辑主题配置文件hexo/themes/_config.yml
详情见indigo主题配置
新建文章
hexo new "postname"
该命令会自动在hexo/source/_post
文件夹下创建一个名为postname
的markdown
文件,会自动在文件开头添加
---
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
这篇关于利用Github Pages+Hexo搭建个人博客的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!