不用花一分线,松哥手把手教你上线个人博客

上一篇:听说你的 IDEA 昨天掉链子了?松哥给你准备了大招
有不少小伙伴私信松哥,打听松哥的博客是怎么做的,其实这个我之前和大家聊过,今天就再来说一说。

我记得是 2015 年 4 月 15 在CSDN上发表了我的第一篇博客,是一个学习笔记,从那之后开启了我博客写作之路,到今天为止 4 年多了。

这 4 年时间我在 CSDN 上发表的博客最多,共有 550 篇原创,CSDN 是我的大本营,不过在这期间也有断断续续在其他公共平台上发过博客,例如 sf、博客园、掘金、慕课网等,但是都是非常零散,2016 年的时候,利用我的 GitHub 也搭建了一个个人站点,但是只是试验了几个页面,并没有好好去维护。

今年搞了一个自己的独立博客 ,从四月份到现在,博客 PV 和 UV 都以肉眼可见的速度增长,我也是蛮开心的。因为大家个人独立博客最怕的就是流量,这也是我把这个事情拖了 4 年才做的原因之一,但是真正动手做之后,我发现搭建个人独立博客比想象的要容易很多,至于流量,只要内容 OK,流量也都不是事。

今天我就来和大家聊一聊如何搭建一个个人博客。

技术选型

目前静态博客站点非常流行,所以我其实不太建议大家再去搞动态博客系统,那样要操心的事情太多了。使用搭建静态博客,可以让我们把大部分精力集中在博客写作上,而不是无休止的耗费在博客搭建上(很多小伙伴搭建博客的时候兴致勃勃,搭建完成后就意兴阑珊,然后就没有然后了,空留一个博客网站摆在那里)。

静态博客选型,松哥目前接触到的主要是两种方案:

GitHub 上 结合 Jekyll 搭建的博客,Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器(如 Markdown)和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。

本地渲染好 HTML 后,上传到服务端,代表作品就是 hexo。

简单说,第一种方式,就是我们在本地写好 markdown 之后,直接上传到服务端,服务端会自动渲染成 HTML,然后展示给用户,第二种方案则是我们在本地写好 markdown 之后,在本地将 markdown 渲染成 HTML,然后将渲染好的 HTML 上传到服务端。(markdown 小伙伴们应该都了解吧,我就不做过多介绍了)

这两种方案松哥都有用,大家见到的 ,是我使用 hexo+icarus 实现的。大家见到的 、、、、 等,则是我使用 Jekyll 来做的,两种方案各有优缺点,这个松哥后面再和大家详述。

今天主要和大家聊一聊 站点的搭建,也就是我采用了 hexo+icarus 来实现的。

这个博客的所有资金投入就是几十块钱买了一个域名,再就没花钱了。站点托管在 GitHub 上,评论系统也用了 GitHub 来做,如果你能接受 GitHub 提供的默认域名,那你甚至连域名都不用买了,接下来我们就来看看这个东西怎么实现。

如果大家玩过松哥的微人事(https://github.com/lenve/vhr)或者 V 部落(https://github.com/lenve/VBlog),那么对于 hexo 上手可能非常容易,因为这个里边也使用了 nodejs,和微人事的前段操作有很多相同的地方。

博客搭建

用 Hexo 搭建,要是有一点点前端 Node 的使用经验更佳,没有当然也没关系,因为与之相关的命令并不多。使用 Hexo 需要提前在电脑上安装好 Node 和 Git ,安装成功后,就可以开始 Hexo 的安装了。步骤如下:

安装 Hexo

npm install -g hexo-cli

在本地创建一个博客目录

hexo init blog

上面这个命令执行完后,会在本地创建一个 blog 目录,这里边就是独立博客所必须的一些文件,然后进入到这个目录中,执行 npm install 命令,安装相关的依赖。

安装完成后,会生成如下目录:

. ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes

这里几个文件/文件夹,我们先来关注其中两个 _config.yml 和 themes 目录, _config.yml 文件中,我们可以做网站的一些基本配置,例如 网站的 title,描述,关键字、图标等,这些配置大都见名知意。如下:

不用花一分线,松哥手把手教你上线个人博客

配置完成后,定位到 blog 目录,执行 hexo s 就可以在本地启动项目了,启动成功后,浏览器中输入 :4000 就可以看到网站了。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyddxj.html