美文网首页
用 GitHub Pages 建立 Hexo 博客 详细图文教程

用 GitHub Pages 建立 Hexo 博客 详细图文教程

作者: 3e8470db5f96 | 来源:发表于2017-03-04 19:41 被阅读56次

请根据您的作业系统下载以下两个本次教程需要使用到的工具。

教程向≠科普向

本篇教程使用Windows作业系统作为示范。

 本篇环境配置

   ×安装Git

   ×安装Node.js

什么是GitHub

简单说,Git就是一个大型共享的代码仓库,也称之为程序员的Facebook

至于Github pages 最早是程序员们用于演示他们的项目效果,总之就是用户托管在github上的静态网页。

那么Node.js是什么呢?

这边分享一个网站的介绍。

为什么这么做?

因为免费、无流量限制

就这么简单粗暴。

关于修改主题、更换域名...等后续工作本篇不讲,自行百度爬文!


工具/材料下载

1. git

用于把本地的HEXO内容提交到github上去

Download:https://git-scm.com/downloads

****git for windows*(Windows系统请戳下方链结) --->

https://git-for-windows.github.io/

2. Node.js

用来生成静态页面的

Download:http://nodejs.cn/download/

无法下载请至 http://www.pc6.com/softview/SoftView_209026.html


申请GitHub

先至https://github.com/申请账号。

若页面出现以下信息,请至EMAIL验证账号。

启用验证信里的链结后,登陆账号,选择Start a project

1.  新建代码库

在Repository name下填写yourname.github.io

yourname = 你的账户名 (忘记的请自行拉到最上,图一申请Github时所输的用户名)

一个github用户只能创建一个个人静态网页和一个组织静态网页,所以请谨慎填写,万一填错了删除project重新创就行。

【这一步非常重要,如果账户名和Repository name不一样会出错】

2. 代码库设置

点击界面右侧的Settings,向下拖动直到看见GitHub Pages

选择master branch 点击Save

安装HEXO

1. 利用Git npm 命令 安装HEXO

在任意位置点击鼠标右键,选择Git Bash Here。

输入 下方指令后按下回车键 (安装需要一些时间)

npm install hexo-cli -g 

-g = 全局安装HEXO

2. 在随便一个喜爱的位置,新建"HEXO"资料夹

并在资料夹内 点击"鼠标右键",选择"Git Bash Here"

输入 下方指令后按下回车键 (安装需要一些时间)

hexo init 

再输入

npm install

3. 刚刚的init指令完成后,继续输入

hexo generate

hexo server 

启动本地服务,进行文章预览调试,

出现以下文字后,可以开启浏览器,输入 http://localhost:4000/

本地预览


修改配置文件

4. 回到HEXO资料夹里,在资料夹内点击鼠标右键,选择Git Bash,

输入 

vim _config.yml 

翻到底部 deploy:

改为

deploy:

type: git

repository: https://github.com/你的 github 账户名/你的 github 账户名.github.io.git

branch: master

(注意 : 后面一定要记得要输 空格 )

*(或者直接 在 _config.yml 上点击右键 使用notepad++编辑)

如果之后所有配置完成却打不开网站,可以将repository改成 ssh://git@github.com:your name/your name.github.io.git


设置SSH keys

5. 在Git Bash输入以下命令(任意位置点击鼠标右键),检查是否已经存在了SSH keys。

ls -al ~/.ssh

如果不存在就没有关系,如果存在的话,直接删除.ssh文件夹*(C:\Users\Administrator\.ssh)里面所有文件:

输入以下命令(邮箱就是你注册Github时候的邮箱)后,回车:

ssh-keygen -t rsa -C "email@gmail.com"

出现 Enter file in .....时按一次回车

然后出现Enter passphrase ... 在: 后面切换成英文输入法 输入你的github密码

然后再输入一次

成功就会出现下图

6. 输入 

ssh-agent -s 

 回车

继续输入 

ssh-add ~/.ssh/id_rsa 

 回车

(这里我是出错了,不晓得你会不会)

如果出错了,再输入

 eval `ssh-agent -s` 

以及 

ssh-add 

输入ssh-add命令后 它会要求你再一次输入github密码 请再输入一次

到了这一步,就可以添加SSH key到你的Github账户了。键入以下指令:

clip < ~/.ssh/id_rsa.pub

7. 回到 Github 点击右上角倒三角形 选择Settings

点击左边 SSH and GPG keys,然后点击右边 New SSH key

Tittle随意输入,然后到 C:\Users\Administrator\.ssh (每台电脑不一样,Administrator是你的电脑用户名)

右键文本打开 id_rsa.pub 档案  复制里头全部内容 贴上至Key栏

出现如图表示配置成功

最后,随意右键 选择Git Bash 输入 

ssh -T git@github.com

你可能会看到有警告,没事,输入“yes”就好。

常见错误请参考:

GitHub Help - Generating SSH Keys

GitHub Help - Error Permission denied (publickey)



设置用户信息

8.虽然以上步骤已经将SSH链接到GitHub了,但是Git会根据用户的名字和邮箱来记录提交,因此要设置您的个人信息

git config --global user.name "cnfeat"//用户名

git config --global user.email  "cnfeat@gmail.com"//填写自己的邮箱


完成部署

9. 一切都准备就绪后,点击右键 选择Git Bash,输入

hexo generate 

完成后 继续输入 

hexo deploy 

执行配置命令

然后再浏览器中输入http://你的 github 账户名.github.io/就行了

每次部署的步骤,可按以下三步来进行。

hexo clean

hexo generate

hexo deploy

常用命令:

hexo new "postName" #新建文章

hexo new page "pageName" #新建页面

hexo generate #生成静态页面至public目录

hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)

hexo deploy #将.deploy目录部署到GitHub

hexo help  #查看帮助

hexo version  #查看Hexo的版本

其它更深入的就请上百度爬文吧,这篇基本上就是基础建立教程。

相关文章

网友评论

      本文标题:用 GitHub Pages 建立 Hexo 博客 详细图文教程

      本文链接:https://www.haomeiwen.com/subject/jiejgttx.html