博客搭建之路

image

前面说了这是我第二次搭建博客,所以对搭建博客的基本流程还算清楚,当时也写过一次博客的搭建流程,写的特别细,每一步,每个截图都贴上去了。

但说实话,这种搭建博客的步骤网上一大堆,而且你去复刻的时候会遇到各种问题,着实让人感觉头疼。其实,个人博客搭建就那些东西,所以这篇博客我主要绍下搭建博客的基本步骤,同时推荐几个我在搭建博客中用到的软件。

博客应该是什么样子呢

首先需要明确我们需要一个怎样的博客,对于我自己来说有如下四点要求:

  • 搭建博客方便
  • 简洁的博客界面
  • 友好的文章撰写工具
  • 博客能够方便的评论

我觉得这些,对于我们想拥有一个自己的博客的人来说太重要了!首先如果博客搭建不够方便,那基本上第一步就迈不出去;其次,博客看起来太丑或手机上不兼容,那真是让人接受不了;再者,写一篇文章如果需要繁琐的撰写步骤和限制,估计你写几篇之后也就不想继续写了;最后如果你写的文章不管好坏,别人看了都不能发表意见,那样博客就失去了交互性。接下来我就来介绍下我是如何搭建一个满足上述四个要求的博客网站。

开始搭建

在博客搭建之前我想说明下,如果你有一定的编程经验那么搭建过程则会比较顺利,如果没有经验也没有关系,遇到问题百度下大部分问题都可以解决,如果解决不了,也欢迎大家在下面留言,我会一一给大家解答。

一、快速搭建

image
  • 挑选

简单的说博客其实就是一个网站,有了博客框架,我们就不需要去通过写代码来搭建博客,我们只需要做一些简单的配置,来自定义你博客的名称、头像、主题等,让其变为自己想要的风格。目前流行的博客框架有WordPressHexo,WordPress一般国外用的比较多,这里我推荐的是Hexo,原因很简单,因为用的人多,相关的资料也比较多,如果遇到问题,上网上去查一下就很快可以解决。同时官网文档是这么介绍的:

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

可见其速度也非常快,到这里博客框架我们就选好了。

  • 搭建

Hexo的搭建可以参考Hexo官方文档,现在已经推出了视频教程。简单总结下可以分为如下几个步骤:

  1. 配置环境(Node.js、Git、Hexo)
  2. 建站(在电脑本地的一个文件夹下执行 hexo init 生成网站所需的文件)
  3. 配置(在 _config.yml 文件中配置网站的标题、名称等信息)

完成上述三个步骤之后就可以通过顺次执行 hexo ghexo s 在本地浏览器中进行预览了。

  • 部署
image

仅仅在自己电脑上能够浏览,肯定是你不希望的。那我们如何让所有的人都可以看到我们的博客呢?首先我们不需要通过购买服务器来展示你的博客,现在有很多免费的Pages静态服务,你可以把网站托管在上面,比如GitHub、GitLab、Coding,这里我推荐Coding(服务器在国内访问速度快)。部署步骤如下:

  1. 注册Coding账号、创建一个项目、开通Pages服务。

  2. 修改博客配置文件 _config.yml 最后面的 deployrepo 加上:

coding: https://git.dev.tencent.com/AccountName/ProJectName.git

  1. 执行 hexo g -d 部署成功之后,你就可以通过例如:1649201921.coding.me/blog 让其他人来访问你的博客。

到这里部署就完成了,如果你想让国外友人也可以方便的访问你的博客,也可以同时部署到GitHub。最后你可以去阿里云等平台去购买域名,然后添加域名解析到自己的博客,这样你就可以通过自己的域名访问你的博客了,在这里提醒下最好购买能够备案的域名!!!

二、优化界面

image.png
  • 挑选

虽然上面我们已经把网站部署好了,但是你会发现网站并不是自己想要的样子,因为使用的是默认的主题 ,所以接下来我们要给我们的博客换一套好看的“皮肤”。Hexo支持主题的更换,并且有很多好看的主题,大部分都同时支持手机端访问。你可在Hexo的主题页面来挑选你所喜爱的主题。在这里我推荐两个主题:

我的博客使用的是NexT主题,NexT主题也有几种不同的样式,可以在在NexT的GitHub上查看不同样式的博客网站效果,找一个你所喜欢的。

  • 配置主题

主题的配置也很简单,分为如下三步:

  1. 安装,将主题clone到本地的 themes/next 文件夹下。
  2. 配置博客根目录下的 _config.yml 修改为 theme: next
  3. 配置主题文件下的 _config.yml ,该目录你可以修改博客的大部分自定义配置。例如设置菜单、 头像、昵称、第三方服务(文章统计、评论、分享)等,详细的配置你可以查看 NexT 使用文档

到这里你可以通过本地预览刚刚配置的博客,相信现在的博客大体上就可以满足你的要求了,但是似乎还没有你自己写的文章,那接下来我们就来看看如何方便的来进行博文的撰写。

三、开始书写

image

对于博客拥有者来说写博客会占用其大部分时间。所以博客的创作过程的友好性也是十分重要的!Hexo通过渲染MarkDown格式的文本来展示你的博客。所以首先我们需要了解MarkDown的语法。

  • 学习MarkDown语法

对于MarkDown的学习快速上手可以参考这里👉 segmentfault

详细的MarkDown语法可以参考这里👉 简书

  • 挑选MarkDown编辑器

熟悉了MarkDown语法之后我们需要一个友好的MarkDown编辑器。推荐如下两个编辑器。

最开始用的是作业部落CmdMarkDown好处是可以左右对照。注册账号之后可以云端同步。后来无意之间发现了Typora,被其简洁的界面和无缝的编写方式所吸引。

  • 图片怎么办🤔
image

博客中显示图片相信对每个写博客的人来说都很重要。因为图片较大,所以不建议和博客放一起,可以在GitHub或Coding上新建一个仓库放置图片,但通常的做法是利用图床。这里我推荐如下2个:

本来想推荐七牛云,但是不幸的是,七牛云现在每个自动分配的图片访问域名只能用一个月。如果想继续使用,你只能绑定你自己已备案的域名才能够享受免费每月10G的存储空间和100万次的GET请求,问了客服,花钱也不能长久使用。虽然这个免费策略对我们刚开始写博客的朋友来说确实很太友,但域名备案需要购买服务器,且需要花费20天左右的时间。所以如果你现在想使用,在购买域名的时候一定要注意,你的域名是否可以备案,2018年后工信部对于很多域名的备案都有限制,例如.cc的域名在北京就不可以备案。

再来说说阿里云,阿里云如果想使用对象存储,需要你购买存储包和流量包,而且请求次数较多时也会计费。适合企业级对于存储容量和访问次数要求较大的用户。但是一个好处就是,你可以先只花5元购买半年40G的存储空间。可以免费获得一个图片访问的域名。这个域名是和你的套餐一起的。只要你续费就不会过期。其他的花费是大概每个0.5元/G的流量费和0.1元/万次的请求费,这取决于你博客的图片大小、数量和访问人数,刚开始使用的话不会太贵。

如果你已经有一个备案过的域名,你可以添加一个域名解析,通过你自己的域名来访问七牛云或阿里云的照片,例如:img.carlwe.com/whyblog.png

  • 通过使用iPic让添加图片更方便
image

如果你的图床已经就绪,一般图床都提供上传图片的地方。但是每次你都要去制作图片->打开网站->上传图片->复制链接->把链接粘贴进去,确实不太方便。这里我推荐使用Typroa和iPic来结合使用。iPic目前需要收费,6/元每月,支持正版。

按照iPic上介绍的方式完成你图床和Typroa的设置之后,你只需要将图片拖入Typora即可。其他的你都不用管了。

  • 通过TinyPNG4Mac来压缩图片
image

如果你使用Mac,可以使用TinyPNG4Mac来压缩图片。TinyPNG4Mac 利用TinyPng的图片压缩技术,只需将图片拖入即可压缩,压缩比惊人,同时图片质量感官上基本上没有改变,关键还免费。强烈推荐!

👉TinyPNG4Mac

四、评论系统

image

通过上述三步,你已经可以开心的写自己的博客了。然而,博客发表之后如果你的博客能够评论那样交互性会变得更好,有了评论之后,你也可以获得读者的反馈,同读者进行交流,提升自己。

  • 挑选

之前我的博客用的是畅言,我们可以通过微博或手机接收验证码登陆,然后进行评论,评论的门槛很高,就算有想要评论的朋友也会因为繁琐的过程而放弃。类似的评论系统有很多。而且大多需要网站进行备案。这里说下我的推荐:

优点是不需要域名备案、支持匿名评论、NexT原生支持、统一的风格、支持MarkDown、Gravatar、邮件提醒、文章阅读量统计,剩下的就是接入了。

  • 接入

配置主题文件下的 _config.yml 开启Valine评论,同时需要去LeanCloud(评论数据所在的位置)注册账号,获取appid和appkey,然后在配置文件中填入即可,具体步骤可参考 快速开始

作为博客所有人,你可以去Gravatar注册一个账号然后上传你的头像,在评论的时候输入你的邮箱和昵称就可以显示你的头像了。同时你可以在LeanCloud中设置邮件提醒,也可以开启评论验证码,但是不太推荐。

总结及完善

通过上面四点我们已经可以搭建一个满意的博客了,就像你现在看到样子。博客的搭建过程由于不同的环境可能会出现不同的问题,但是总结下来,我觉得如下三点很重要:

  1. 尽量阅读官方的文档进行操作。大部分时候官方文档可以解决你90%的问题,而且是最权威的解决方式。
  2. 遇到问题不要放弃,多尝试。
  3. 博客搭建容易,难的是坚持写博客。

虽然目前博客已经可以运行了,但其实还是有很多可以优化的地方,以下几点也是接下来我努力的方向:

  1. 能够友好的分享到微信好友及朋友圈
  2. 更好的图片、音频、视频浏览体验
  3. 博客较多时开通搜索功能
  4. 创建自定义的文章分类

这就是我博客的搭建之路,过程中也遇到过很多问题,但只要你坚持下去,相信你的博客也将变得越来越好,有什么问题可以在下面给我留言。

发布于:2018-12-22
原文链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350