博客开通

打造属于自己的博客系统

前言

以前写博客时用的是CSDN、 博客园、新浪博客之类的博客系统，这类博客系统好处就是什么都弄好了，自己只需要写文章即可，但是一类大缺点就是广告太多，打开一篇文章，基本满屏都是广告，让人看下去的愿望都没有，所以一直打算先搞个自己的博客系统，专门记录一下学习过程。

我的博客链接：crazyandcoder.work/

在这里插入图片描述

正文

关于hexo的简介请看官网介绍《详细介绍》

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

而我们要做的就是现在本地写好文章，然后解析成HTML文件，最后再部署到github上面显示出来，总的来说，过程还是蛮简单的，而且步骤也简单，只需要几条命令即可，下面我们来具体实现。

搭建过程

配置

首先需要下载一些配置软件：

  1. hexo，生成本地的文章
  2. node.js ，用来生成静态页面的
  3. git ，把本地的hexo内容提交到github上去.
  4. 申请github账号 ，部署到博客
  5. 申请 阿里云 域名，绑定github.io

注意: 这里面申请的github账号的名称就是以后你博客的域名，所以一定要起一个有个性的名字。

安装node.js和git没有啥好说，直接下载软件安装即可，傻瓜式安装。

下面来说一下安装hexo，需要用到以下的命令：

1
2
npm install -g hexo-cli
复制代码

正常情况下，输入以上命令即可安装成功，测试一下，输入命令，显示版本号即表明安装成功，如果中间过程中出现任何问题，请自行百度解决

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
C:\Windows\System32>hexo -v
显示内容：
Native thread-sleep not available.
This will result in much slower performance, but it will still work.
You should re-install spawn-sync or upgrade to the lastest version of node if po
ssible.
Check C:\Users\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\hexo-
util\node_modules\cross-spawn\node_modules\spawn-sync\error.log for more details
hexo-cli: 1.0.1
os: Windows_NT 6.1.7601 win32 ia32
http_parser: 1.0
node: 0.10.29
v8: 3.14.5.9
ares: 1.9.0-DEV
uv: 0.10.27
zlib: 1.2.3
modules: 11
openssl: 1.0.1h
复制代码

运行博客系统

以上软件安装好，我们就已经生成了一个博客系统，只不过这是最基础也是最简洁的博客系统，我们来测试一下。

在本地磁盘新建一个目录，这以后就是我们写博客的地方啦譬如我在E盘新建一个hexo目录，同时进入到该目录下

1
2
C:\Windows\System32>cd E:\hexo
复制代码

进行初始化一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
C:\Windows\System32>hexo init
显示内容：
E:\hexo>hexo init
Native thread-sleep not available.
This will result in much slower performance, but it will still work.
You should re-install spawn-sync or upgrade to the lastest version of node if po
ssible.
Check C:\Users\liji\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\hexo-
util\node_modules\cross-spawn\node_modules\spawn-sync\error.log for more details
INFO  Cloning hexo-starter to E:\hexo
Cloning into 'E:\hexo'...
remote: Counting objects: 53, done.
remote: Total 53 (delta 0), reused 0 (delta 0), pack-reused 53
Unpacking objects: 100% (53/53), done.
Checking connectivity... done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git
) registered for path 'themes/landscape'
Cloning into 'themes/landscape'...
remote: Counting objects: 724, done.
Rremote: Total 724 (delta 0), reused 0 (delta 0), pack-reused 724eceiving object
Receiving objects: 100% (724/724), 2.51
Resolving deltas: 100% (381/381), done.
Checking connectivity... done.
Submodule path 'themes/landscape': checked out 'decdc2d9956776cbe95420ae94bac87e
22468d38'
复制代码

这样就生成了一个默认的博客系统。 我们来查看一下默认的博客系统是什么样子， 输入以下命令：

1
2
3
4
5
6
7
E:\hexo>hexo generate
等待几秒结束后，输入
E:\hexo>hexo s
成功后会显示：
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
复制代码

我们在浏览器上面输入以上地址 http://localhost:4000/： 我们就会打开一个本地的HTML页面，这就是我们的博客原型，

不过这只能在本地访问，别人还是不能访问到，要想别人也能看到的话，接下来我们就要发布到github上面去。

发布到GitHub

那么问题来了，我们该如何发布到github上面呢？

1、首先我们，需要在github上面新建一个账号，点击进入github官网注册一个账号，这个账号就对应我们的博客访问地址，譬如，我注册的账号就是crazyandcoder，那么我的博客访问地址就是http://crazyandcoder.github.io/

2、新建一个repository,输入名字。

在这里插入图片描述

3、配置我们的hexo init生成的配置文件

在这里插入图片描述

4、在最后面添加我们刚刚新建的repository，里面的test就是我们刚刚创建的repository

在这里插入图片描述

5、最后发布

1
2
hexo deploy
复制代码

测试，在浏览器中输入博客地址 http://账户名.github.io/ 就可以进行测试了，别人也可以访问了。

总结：

以后我们进行写文章到发布到我们的博客系统上去总共要经历一下几个步骤：

  1. hexo new ”postName” #新建文章
  2. hexo new page ”pageName” #新建页面
  3. hexo generate #生成静态页面至public目录
  4. hexo server #开启预览访问端口（默认端口4000，’ctrl + c’关闭server）
  5. hexo deploy #将.deploy目录部署到GitHub

其中第一步在本地创建文章，会在本地博客目录下生成文章。

在这里插入图片描述

然后我们就可以打开文件，在里面写文章。

写好文章后，我们需要将其生成HTML文件，如何生成，这就需要使用第三步的命令：

1
2
hexo generate
复制代码

生成文章后，我们首先可以在本地预览一下，如果没有什么问题的话可以发布到github上面。使用以下命令：

1
2
hexo depoly
复制代码

等待几秒即可发布完成

博客主题选取

以上就是用hexo + github搭建自己的博客系统的内容。最后附上一些常用的hexo主题，供大家自己选择：传送门+hexo主题

绑定域名

我自己用的域名是阿里云域名，很便宜，一年不到10块钱，很划算，接下来我们需要将上面http://账户名.github.io/ 绑定自己申请的域名上面，这样我们就可以直接访问域名就可以查看博客了。

购买域名

域名的话，我推荐阿里云，毕竟大公司，靠谱。我们购买域名的时候，首先需要查询一下，这个域名有没有被别人注册过。域名查询，到这个网址上面查询一下，如果没有被注册过，即表明你可以申请使用的。譬如，我们搜索jackboyblog.tech这个博客域名，没有被注册，你就可以购买，资金充足可以购买顶级域名，不然的可以选择一些普通的，譬如tech.work等。我自己的就是work，很便宜，才几块钱一年。

在这里插入图片描述

域名解析

（1）在你的github博客仓库下创建一个名字为 CNAME的文件，在其中填写你的域名地址 ，注意 ：不要包含Http://和www

在这里插入图片描述

注意： 不要包含Http://和www

![在这里插入图片描述](data:image/svg+xml;utf8,)

（2）进入你的博客github仓库 ，点击settings,查看Custom domian这一项是否已经填写好并保存

![在这里插入图片描述](data:image/svg+xml;utf8,)

（3）解析你的域名，你可以在终端中ping一下你的 github博客的地址，得到ip

![在这里插入图片描述](data:image/svg+xml;utf8,)

（4）进入域名解析控制台，点击解析，点击 添加纪录 ，记录类型选择A，主机记录填：www 记录值填你的IP TTL默认就好了（调大TTL值可以提高域名的解析稳定性和速度，如果近期要更改IP的话建议调小点）

再点击 添加记录 记录类型选择A，主机记录填：@ 记录值填你的IP TTL默认就好了；

![在这里插入图片描述](data:image/svg+xml;utf8,)

经过以上步骤，我们过个10分钟左右即可访问自己的域名博客了。我的是：crazyandcoder.work/

在这里插入图片描述

以上便是搭建自己博客系统所有的步骤，记录总结一下，有需要的朋友可以参考一下

感谢

作者：crazyandcoder
链接：https://juejin.im/post/5df3695d518825122671c029
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

工具/PicGo+Github搭建免费图床

图床

Github repo图床

Github的repo也可以储存东西，最直接的就是程序的版本控制，当然也可以用来当作备份储存，用来储存图片（github官方回复是：该行为不构成abuse，如果把github当图床算滥用，那么那么多人把微博当图床怎么就理所应当捏）。其实github对于国内的响应速度并不快，而且时不时被block，所以用github当图床完全是出于储存个人用途的自创图片，并不能当CDN使用。github自从被微软收购后，我对github的信心大增，代码以前只敢用git管理保存在本地，现在可以放心大胆上传到github了（很多是private，所以不可见），github图床主要就是图个稳定，也并不是想恶意刷github服务器的流量，恶意影响大家的体验。

  1. 新建repo，名称任意

  2. 打开账户/Settings/Developer settings/Personal access tokens,点击Generate new token

    image

    image

  3. 在弹出的产生token页面，Token description随意填写，但是一定要勾选上这几项

    image

  4. 下载PicGo客户端对应的版本并安装，github地址：https://github.com/Molunerfinn/PicGo/releases

  5. 启动PicGo后，打开设置界面，点击

    image

    在第一栏填入你的github名称/repo名称；在第二栏填入你的分支名称，默认为master；在第三栏填入你刚才申请到的Token；第四栏填入你的repo中的储存路径；最后点击确认，再点击设为默认图床

  6. 使用QQ截图Ctrl+Alt+A或者微信的Alt+A截图后，按下Ctrl+Shiht+P快捷键即可自动上传到github对应的repo中，上传完成后，会有提示，自动将对应的图片地址送入剪贴板中，直接Ctrl+V即可粘贴对应的地址出来了~~

PicGo中使用其他图床

PicGo一共支持多种图床：

image

  • 其中SM.MS图床是免费且不需要账号的图床，缺点是无法查看历史上传的图片，因此每次使用同一张图片都需要重新上传一张一样的获取新的地址，或者是拷贝之前上传过的地址

  • 微博图床，我设置好账号和密码后，并不能正常上传，原因应该是微博限制了必须加上验证码才能登陆，所以微博图床对于这款程序并不太友好，应该说微博图床上传图片都很麻烦，登录过程就很麻烦，如果手动上传，感觉更麻烦，所以还是不推荐用微博图床 经过再次测试后，发现微博第一次在某台电脑上登陆时，验证比较复杂，需要输入验证码，还有可能需要验证手机号，所以可以使用浏览器在网页中打开微博，然后登陆自己的微博，登陆成功后，在使用PicGo选择微博图床，进行上传测试，这时就可以正常上传了

    image

  • 腾讯、阿里的对象储存，上面说了，免费都有时间，过了免费时间后，可能需要付费，主要优势就是CDN加速了，超快，当然如果你的博客看的人多了，那么流量也多，费用也贵

  • 七牛云和又拍云可以申请免费储存空间，是不错的选择，但是也要小心流量被刷导致扣费、封号，具体可以看看别人的前车之鉴

image

  • Imgur也是免费的图床，是国外网站，相对国内速度不太理想，还是SM.MS速度快些

Github图床缺点

  1. 对应储存图片的repo必须是public，如果是pravite，那么图片地址会带有一个随时刷新token，这样虽然repo他人不可见，但是也没法作为图床用
  2. 图床每添加一张，那么会提交一次commit，这样会导致你的github动向表部分一片绿。。。。。虽然这样显得你很活跃，但是真正点进去会发现你的代码更新并没有你真正提交commit的频率高。

禁止滥用

对于个人MD使用来说，Github是一个相对稳定（微软收购后更加稳定了）、不用付费、可以查看历史、速度还行的图床。但是绝对不适用于大流量的场所，只限于个人小流量使用！！！！！！！！！！！！！！！

作者：FelixCoder
链接：https://www.jianshu.com/p/d51258ef5484
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。