个人博客搭建完成,欢迎大家来访问哦
黎默丶lymoo的博客
1.本地环境的安装
安装node.js
安装git
安装hexo
hexo是基于node.js的静态博客。
在你想创建博客的路径下创建一个blog文件夹(这里文件名随意)。
然后打开MAC电脑的终端,进入到这个文件夹
(博主是创在根目录下所以直接cd blog就能进入)
接着输入
$ sudo npm install -g hexo;
此时hexo已经装好了,再输入$ hexo init
初始化文件夹
会将github上的所有hexo的初始化项目下载到该文件夹下
INFO Start blogging with Hexo!
显示这行代码就说明初始化成功了
此时我们可以先试一下输入$hexo g
部署形成文件
然后等它部署好之后再输入$hexo s
开启本地测试(退出就按Ctrl+C)
此时打开浏览器输入http://localhost:4000/,可以进行查看我们的初始页面
效果如下:
![](https://img.haomeiwen.com/i4955010/e6ae8c948ca5ed41.png)
<strong>至此,我们的环境都已经安装完成了,让我们进行下一步吧!</strong>
2.注册github
如果已经有账号了可以直接往下看,
打开github官网进行注册登录
登录之后出现如下界面,点击Start a project
![](https://img.haomeiwen.com/i4955010/64f8c11acd17cd24.png)
然后在Repository name中填入你的Owner的用户名在加上.github.io,然后这就是你的域名了(这里由于博主已经创建过一个一样的库了所以提示错误),然后点击下面的按钮
![](https://img.haomeiwen.com/i4955010/efb6425bbb7dda91.png)
接着点击页面右上角你的头像选择your profile进入下面页面,选择刚才创建的库
![](https://img.haomeiwen.com/i4955010/88e8564943b0ba9e.png)
进入之后选择Settings选项卡,下拉至GitHub Pages栏目中将Source里选择master branch,如果已经是这个选项,就不需要更改
![](https://img.haomeiwen.com/i4955010/712d095a2e2bd6a4.png)
3.配置Github SSH keys
我们需要给我们的MAC添加SSH Keys,让Github能够绑定到我们这台电脑上,能够直接提交传送修改项目。
<b>①.首先先查看一下本机是否有过SSH KEY的设置</b>
在终端输入cd ~/.ssh 或cd .ssh
如果是第一次设置则会显示No such file or directory
如果有配置过则进入~/.ssh路径下输入ls查看当前路径文件,再用rm*删除所有文件
<b>②.设置SSH KEY</b>
在终端中进行如下配置:
$ cd ~ #保证当前路径在”~”下
$ ssh-keygen -t rsa -C "xxxxx@xx.xxx" #引号里将xxx换成你注册的邮箱地址
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/xxxx_000/.ssh/id_rsa): #不填直接回车
Enter passphrase (empty for no passphrase): #输入密码(可以为空)
Enter same passphrase again: #再次确认密码(可以为空)
Your identification has been saved in /Users/xxxx/.ssh/id_rsa. #生成的密钥
Your public key has been saved in /Users/xxx/.ssh/id_rsa.pub. #生成的公钥
The key fingerprint is:
SHA256:plEUOl2Syg3KprBZYAwCuxa7V2ELo2GqCaAg3ERnY0M xxxxxxx@xxx.xxx
The key's randomart image is:
+---[RSA 2048]----+
|B .o.E +o. |
|++o + ++.o |
|** = =o+o |
|O.* B =o. |
|=O o o. S |
|*.o . + |
|o. . . |
| . |
| |
+----[SHA256]-----+
$ vim ~/.ssh/id_rsa.pub #编译代码 将上面图形转换成代码
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC+7F3/3/gA6GFwKyhIONc+fZu5Re/
Y2SzeGRNbg/qxxxx5KrQw/
JxxxA2qh7xxxxxxxxxxxxpXBiIn+7MI4Pfd9ZaUFfjQ7fQPNhZ1gs1GFtLXTaJ2RAvnBY6
/hqPxkQqp8qkOaEbUtyrKciW+YXs/Qux/d2hnwj3F/
dvfQ5JjFlbBNydkNJKat3wU7BKL5TIffMPzdnL/
Ir5y0h5apcp4l0wruQzkXKHcMgI4ltYqOscqu4nawzZII3wiwxAcFd+0BeboCs+BP7U/
iXpKyxOa9Br8sFMU/q7O/i7RcBufEg5W9wxkWB3i0QRmRyctLOj8yvXCBM4KnL6Amz
xxxxxx@xxxx.xxxx
~
~
~
# 这是已经生成好ssh key,其存放路径为:/Users/你电脑的用户名/.ssh/下。
# 可以直接将ssh-rsa至@xxxx.xxxx这一大段复制下来
<b>③.绑定Github上的SSH KEY</b>
返回刚才的Github页面点击右上角的头像边上的小三角选择Settings
![](https://img.haomeiwen.com/i4955010/041e8840c35595df.png)
在左侧选择SSH and GPG Keys栏,然后点击News SSH Key
![](https://img.haomeiwen.com/i4955010/9cfd94e108b10404.png)
Title里可以自定义填入,Key里就把之前从"ssh-rsa至xxxxx@xxxx.xxxx"这一大串复制进去,然后点击Add SSH Key即可添加完成
![](https://img.haomeiwen.com/i4955010/5a240596ab037bd1.png)
<b>④.配置用户名和邮箱</b>
返回终端进行如下操作设置你的用户名和邮箱地址:
$ git config --global user.name “your_username” #引号里设置用户名
$ git config --global user.email “your_registered_github_Email” #引号里设置设置邮箱地址(建议用注册giuhub的邮箱)
<b>⑤.检测SSH Key是否配置成功</b>
在终端输入$ssh -T git@github.com
出现如下字段则说明配置成功
Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access.
至此我们已经完成了与github的绑定
4.设置hexo博客的配置文件
找到你创建的博客的位置,打开其文件夹下的<span style="color: #e8000f">_config.yml</span>文件
将其拉到最后找到<span style="color: #e8000f">deploy</span>字段,进行如下设置:
deploy:
type: git
repository: https://github.com/你自己的Github用户名//你自己的Github用户名/.github.io
branch: master
如果想了解更多可以查看hexo官网
5.上传博客
这里我们需要安装一下git的上传代码插件
进入终端输入$ npm install hexo-deployer-git --save
接着我们就可以上传我们的博客了
依次输入
$hexo clean #清除网页的缓存
$hexo g #生成静态页面至public目录
$hexo s #会开通本地测试的接口
$hexo d #将.deploy目录部署到GitHub
如果最后出现INFO Deploy done: git
则说明上传成功
此时就大功告成了!你可以去打开浏览器访问一下你创建的Github pages地址(你的Github用户名.github.io),然后就能够看到你本地的hexo博客已经被部署到github上去了。而且此时博客的默认主题是landscape,就是之前本地测试时的样子,如果想要更换主题可以访问hexo的主题
6.发布文章
在终端输入$hexo new "文章名"
然后就能看到在你博客文件夹下的/source/_posts/下面会看到你新建的博客
注意这里的博客是markdown格式的以.md为后缀名的文件,如果想学习下怎么使用可以查询一下markdown的书写格式,同时markdown也是兼容html的书写方式。
文章写完之后在终端输入
$hexo g
$hexo d
重新发布即可!
7.小结
![](https://img.haomeiwen.com/i4955010/a07f1a9244394b7c.png)
原文链接
网友评论