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

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

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

你需要的准备工作:

Node.js

  1. 下载Node.js
  2. 安装Node.js
  3. 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)。出现版本号说明成功。

域名

  1. 注册域名
  2. 实名认证
  3. 域名解析

    • 域名注册

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

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

阿里云域名注册位置

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

  • 实名认证

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

域名实名认证

  • 域名解析

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

域名解析

域名解析设置

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

GitHub

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

    • GitHub Pages 为何物

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

GitHub Pages Help

  • GitHub 创建仓库

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

  1. 下载安装
  2. 初次安装 Git 配置Git
  3. 配置 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。

配置SSH密钥

Sublime Text 3

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

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

Typora

  1. 下载Typora
  2. 安装Typora

    • 下载Typora

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

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

  • 安装Typora

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

MPic

  1. 下载MPic
  2. 安装MPic

    • 下载MPic

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

  • 安装MPic

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

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

Bmob

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

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

发布了77 篇原创文章 · 获赞 66 · 访问量 29万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览