0%

mac+hexo+github搭建个人博客

mac+hexo+github搭建个人博客

安装node.js

从官网下载对应版本进行下载:https://nodejs.org/en/

安装git并进行相应配置

网上有很多大家写的教程,大家可以自行搜索进行一下配置。
在这里也贴上一个csdn上的配置教程:
http://blog.csdn.net/xiaohanluo/article/details/53214933

安装hexo

在终端执行如下命令进行hexo的安装

1
$ npm install -g hexo-cli

如果出现错误:rollbackFailedOptional: verb npm-session 6ba5c1dbd2f5df8a,可以通过以下方式解决

1
2
3
4
5
6
7
# 去掉npm代理:
sudo npm config rm proxy
sudo npm config rm https-proxy
# 修改npm的资源镜像链接:
npm config set registry http://registry.npm.taobao.org
# 查看是否修改成功:
npm config get registry

再执行 npm install -g hexo-cli 就可以了

解决方法来自:https://blog.csdn.net/mmm654/article/details/106184630/

博客初始化

创建一个文件夹 MyBlog 用于存储博客文件

1
$ cd MyBlog

初始化本地博客,输入以下命令。初始化时,文件夹要为空,否则会初始化失败。失败了可以删除文件夹再重新创建。

1
$ sudo hexo init

测试(生成本地网页文件并开启服务器)

1
2
sudo hexo g
sudo hexo s

通过http://localhost:4000 可以查看本地博客

发布网站到github

注册并登陆GitHub账号后,新建仓库,名称必须为 user.github.io, user就是你github账号的名字

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

关于站点配置文件和主题配置文件可以在主题Next的官网看到细节:http://theme-next.iissnan.com/getting-started.html

打开MyBlog下站点配置文件 _config.yml, 翻到最后修改并保存。

如果存在权限问题可以采用命令行的方式修改,也可以直接复制一个_config.yml文件的副本进行修改,再将原来的 _config.yml文件删除,将副本改名为 _config.yml。

1
2
3
4
deploy:
type: git
repository: https://github.com/bellalee01/bellalee01.github.io.git[填入之前在GitHub上创建仓库的完整路径]
branch: master

安装Git部署插件

1
$ npm install hexo-deployer-git --save

测试(生成静态文件并上传到服务器)

1
2
3
sudo hexo clean 
sudo hexo g
sudo hexo d

点击 bellalee01.github.io[user.github.io]就可以访问个人博客啦

绑定域名

如果想要用自己喜欢的域名访问个人博客,就需要将自己的域名绑定到自己的网站上。

域名注册的方式有很多,可以通过阿里云/百度云/腾讯云购买你喜欢的个性域名。

购买域名后,为域名添加解析功能(因为用的是github的服务器所以不需要备案,如果使用的是国内的服务器需要先通过域名代理厂商进行备案)。

ping github域名得到一个ip

1
$ ping bellalee01.github.io

添加两条域名解析记录,记录值就是ping得到的结果

进入本地博客文件夹

1
$ cd MyBlog

进入 MyBlog/source目录
创建无后缀的CNAME文件,将域名粘贴进文件中

注意保存成所有文件而不是txt文件
测试

1
2
3
sudo hexo clean
sudo hexo g
sudo hexo d

这时候打开浏览器在地址栏输入你的个性化域名将会直接进入你自己搭建的网站。
比如我的网页是https://lixuefei96.com

主题设置

github上有很多好看的hexo模板,可以按照你的喜好进行选择:https://www.zhihu.com/question/39388850

这里我选择了简洁的Next

同样还是在MyBlog文件夹下

1
$ cd MyBlog

执行

1
$ sudo git clone https://github.com/iissnan/hexo-theme-next themes/next

你就会发现themes文件夹下多了next文件夹,也就是说next主题下载好了

启用next主题

打开MyBlog文件夹下的站点配置文件_config.yml,把主题改成next

1
theme: next

next有4种不同的风格,可以通过next文件夹下的主题配置文件_config.yml找到Schemes,选择你喜欢的进行设置

关于next的设置内容,next官网里有非常详细的讲解http://theme-next.iissnan.com/getting-started.html 可以根据需要进行配置

然后执行如下命令就可以将更改上传到服务器(每次更新过后都要执行这个操作进行上传)

1
2
3
sudo hexo clean
sudo hexo g
sudo hexo d

访问你自己的个性域名/github仓库路径都可以看到最新的页面

发布文章

首先创建一个md文件,命令如下:

1
$ sudo hexo new my_first_blog[文件名]

然后在博客文件夹目录下的MyBlog/source/_posts中打开

在这里推荐一个mac上非常好用的markdown编辑器软件:Typora(https://www.typora.io)非常的简洁好看易上手

图床选择

如果我们都把图片存放在source文件夹加载起来会非常慢,而把博文里的图片上传到某一网站,然后获得外部链接,使用Markdown语法完成图片的插入的方式加载起来会很快,这种网站也成为图床。
例如:

1
<img src="http://qo26v676s.hn-bkt.clouddn.com/123.jpg-pic1" width = 100% div align=center/>

在这里我选择了七牛云(https://www.qiniu.com)

首先创建一个账号, 登录后在对象存储中新建空间,在建好的空间中选择文件管理就可以上传图片了。从更多中复制外链,就可以直接使用了。

注意:图片上传后直接引用外链可能会存在模糊的情况,需要进行图片样式设置再引用
官方教程如下:https://developer.qiniu.com/kodo/kb/1395/video-tutorials-pictures-style?category=kb

写完博客后,再通过命令上传到服务器,就能看到博文啦。

next还有更多个性化的设置,比如头像,标签等等等,都可以从官网中进行学习并设置

http://theme-next.iissnan.com/getting-started.html

参考文献:
https://zhuanlan.zhihu.com/p/26625249
https://zhuanlan.zhihu.com/p/75438236