GitHub Pages+hexo搭建个人博客全教程之准备工作

最新推荐文章于 2024-07-17 17:27:18 发布

小红妹

最新推荐文章于 2024-07-17 17:27:18 发布

阅读量2.4k

点赞数 1

分类专栏： Android 辅助工具文章标签： GitHub Pages+hexo hexo GitHub Node.js 搭建个人博客

本文链接：https://blog.csdn.net/l_201607/article/details/81008677

版权

Android 辅助工具专栏收录该内容

8 篇文章 2 订阅

订阅专栏

title: GitHub Pages+hexo搭建个人博客全教程之准备工作
date: 2018-07-10 10:40:53
tags: GitHub Pages+hexo
categories: 搭建个人博客

看到别人有自己的个人技术博客，自己也想要一个，于是走上了搭建（zhuang）个人(bi)博客之路。起初我是想要一个网页版的简历（我会放到个人博客网站），我是使用GitHub Pages+hexo实现的，也推荐大家使用该方法（主要是服务器免费）。本人半科班出道，安卓开发，有些前端基础，如果你也想拥有自己的博客网站，我想接下来的文章会让你少走弯路。

可以先看下我的网站效果:

你需要的准备工作：

Node.js

下载Node.js
安装Node.js
Node.js环境配置

下载Node.js

Node.js官网下载地址看电脑系统来下载，我这是wind系统的，如果你是Mac的，那就下载对应版本。

安装Node.js

推荐一个网站菜鸟教程，里面有很多的教程，有空学习一下。安装Node.js里面也有。

步骤 1 : 双击下载后的安装包

步骤 2: 勾选接受协议选项，点击 next（下一步）按钮 :

步骤 3 : Node.js默认安装目录为 “C:\Program Files\nodejs” , 你可以修改目录，并点击 next（下一步）：

步骤 4 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next（下一步），建议默认。

步骤 5 :点击 Install（安装）开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。然后并点击 next（下一步）。

步骤6：安装过程，点击 Finish（完成）按钮退出安装向导。
Node.js环境配置

Node.js安装完毕后会自动在系统的path环境变量中配置了node.exe的目录路径，

检测PATH环境变量是否配置了Node.js，按开始键（wind）+R—>输入"cmd" —> 输入命令"path"，输出结果有如下代码就好：

C:\Program Files\nodejs\

检查Node.js版本号并检查npm：开始键（wind）+R—>输入"cmd" —> 输入命令"node --version"，

安装Node.js时会自动给你安装了nmp，npm是Node.js的包管理工具（package manager）。出现版本号说明成功。

域名

注册域名
实名认证
域名解析

域名注册

我们先聊域名，如何拥用自己的域名，推荐去阿里云购买一个（买最便宜的），登录阿里云（没有号注册一个），你也可以不要域名，到时候你的域名就是GitHub仓库的路径。

全部导航—>产品—>域名与网站—>点击域名注册

进去之后你会看到万网·阿里旗下品牌，在搜索框搜索你要买的域名，注意右边域名后缀选择.top，当然你可以选.com的（俺只买最便宜，穷）；加入清单购买，

实名认证

阿里云控制台—>域名与网站—>域名—>未实名认证域名—>输入相关信息进行认证，认证审核一般为一个工作日，我的当天就好了

域名解析

域名解析是在域名认证审核成功之后做的，在认证期间，把GitHub仓库先创建了（跳过此处看GitHub仓库创建），解析的时候才有仓库路径。

参数说明：记录类型填CNAME，主机记录填@，有疑问点后面问好，解析线路填默认，记录值填你的GitHub的仓库路径（没有GitHub仓库路径先去创建，往下看）。TLT值是缓存时间，随便选个就行。

GitHub

GitHub Pages 为何物
GitHub 创建仓库
上传HTML文件看效果
添加CNAME文件

GitHub Pages 为何物

GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.

GitHub Pages Help

GitHub 创建仓库

Description是仓库描述，选填。

仓库创建好之后，在浏览器输入https://SmallRedSister.github.io（这是我自己的仓库路径，输入你自己的）就会看到网页，如果你的Description填了的话，就会看到描述内容。仓库路径有了，回到域名解析，把域名解析了。

上传HTML文件看效果

这步之后都需要使用Git，请确保你已经把Git部分弄好。如果你还没安装Git，请跳过往下看Git部分。

第一步，将GitHub仓库克隆到本地，

找到一个你想放入项目磁盘文件中右击选中Git Bash Here, git clone 你的GitHub仓库路径，后面加上.git。例如我的：

git clone  https://github.com/SmallRedSister/SmallRedSister.github.io.git

你会在你的文件中看到名为README文件，其中文件名是你的仓库路径名。

第二步：上传HTML文件，如果你的前端可以的话，自己写然后上传。在你clone下的文件夹下（SmallRedSister.github.io）新建index.html文件，内容你可以自己写，也可以用下面我提供的代码作为测试。

<!DOCTYPE html> 
<html> 
<body> <h1>这是我使用github pages搭建的个人站点。</h1>
</body>
</html>

接下来我们提交文件，在空白处右击选中Git Bash Here，依次输入如下代码，

git add .    //这个写好之后，按回车键再输入git commit -m "首次提交"命令
git commit -m "首次提交"   //这个写好之后，按回车键再输入git push命令
it push    //写好按回车键
最后会提示你输入GitHub用户名和密码。

更新成功之后，你的个人博客网站算是有一点苗头了，你可以在浏览器输入你的GitHub仓库路径看效果。

https://SmallRedSister.github.io    //这是我的，请输入你的好吧

添加CNAME文件

添加CNAME文件是让你的GitHub仓库路径绑定你的域名，下次你搜索仓库路径时会自动跳到你的域名。

这样你就有属于自己域名的个人博客网站。添加CNAME文件有两种方法，选一种你喜欢的就行。

第一种：和使用git提交index文件一样

新建CNAME文件，内容是你的域名，比如我的域名：liaichuan.top ，注意没有前缀https:// 也没有www，

你不放心的话，请前往阿里云复制过来。提交程序和提交index文件一样，往回看，这里不重复。

第二种方法：在GitHub仓库新建一个文件即可

Git

下载安装
初次安装 Git 配置Git
配置 SSH keys

下载安装给Git

Git客户端官方下载地址
初次安装Git配置 Git

Git 会根据用户的名字和邮箱来记录提交，那么设置你的名字和邮件地址：更多设置请移步Git官网教程

$ git config --global user.name "John Doe"  //你的GitHub名字
$ git config --global user.email "johndoe@example.com"   //你注册GitHub时使用的邮箱

配置 SSH keys

安全起见，为了你的git和GitHub更好的通信链接，需要加入SSH Keys（密钥）。如果你不是第一次安装Git，那么检查一下是否已经存在SSH密钥，输入以下代码：

$ cd ~/. ssh #检查本机已存在的ssh密钥

如果提示：No such file or directory 说明没有。那生成新的 SSH Key吧！输入：

ssh-keygen -t rsa -C "你注册GitHub时使用的邮件地址"

然后会有提示：按回车就好，按一次没提示你输入密码的话，再连续按两次。总的按三次。

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa): <回车就好>

Git会弹出一个对话框，让你输入GitHub的密码。之后会在用户目录下生成一个.ssh文件，打开本地 id_rsa.pub 文件，此文件里面内容为刚才生成的密钥，复制里面的全部内容。然后点击GitHub头像—>settings—>SSH and GPG keys—>new SSH key---->Title（随便填一个名字）—>Key（复制SSH密钥进去）—>Add SSH key。

Sublime Text 3

神器不多说，谁用谁知道。Sublime Text官网，如果你已经拥用请跳过。进官网之后点Download，

点击下载的应用程序进行安装（Sublime Text Build 3176 x64 Setup），安装没咋好说的，后面那些添加插件呀什么的，自己找时间弄。

Typora

下载Typora
安装Typora

下载Typora

Typora是免费极简 Markdown 编辑器！好用的 MD 格式阅读器。我这篇博客就是用它写的（当然也用到ST）

Typora官网进入官网拉到底部，点击Windows。Typor是用来写博客的，后面专门写一篇博客详细介绍。

安装Typora

点击下载的 typora-setup-x64 应用程序进行安装。默认安装，要改的话就是安装路径。

MPic

下载MPic
安装MPic

下载MPic

MPic 官方网址点击立即下载。如果你是Mac系统，使用IPic 。

安装MPic

MPic 2.2.1.3 解压压缩包，点击MPic.exe安装。

说明：MPic仅支持七牛云，七牛云我不是很了解，使用七牛云会有的麻烦，要实名认证，虽然是免费的，还要在里面存10钱，如果你嫌麻烦，那使用Bmob。

Bmob

Bmob这个你可以去了解一下，提前注册一个号，最好看下文档，后面写博客的时候我会详细介绍。我的图片不用七牛云存，用的是Bmob.

总结：这篇博客写到这吧！写不动了，下一篇我们说 GitHub Pages+hexo搭建个人博客全教程之hexo，

小红妹

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
GitHub Pages+hexo搭建个人博客全教程之准备工作

看到别人有自己的个人技术博客，自己也想要一个，于是走上了搭建（zhuang）个人(bi)博客之路。起初我是想要一个网页版的简历（我会放到个人博客网站），我是使用GitHub Pages+hexo实现的，也推荐大家使用该方法（主要是服务器免费）。本人半科班出道，安卓开发，有些前端基础，如果你也想拥有自己的博客网站，我想接下来的文章会让你少走弯路。可以先看下我的网站效果:个人博客网站地址...
复制链接

扫一扫