美兰十三的想疗院


一个不务正业的前端狗,爱纹身、玩乐队、金属党、专门写Bug~


如何免费搭建一个属于自己的博客

\n\n
必备工具:\n\n

  • coding 或者 github (这将是你博客的服务器)\n
  • Hexo 或者 jekyll (这是你博客的系统,当然还有很多别的 可以自行百度/谷歌 :“ 静态博客 ”)\n
  • git (这可是个很重要的玩意儿没有这个你搞不定你的博客)\n * nodejs (这尼玛也很重要)\n
  • sublime 或者 atom 或者 vscode 再不济 你就 记事本吧!(这玩意重不重要 其实还好,主要是用来写 博客的,就是个编辑工具,当然 如果你是个码农 那你一定认识它们真正的作用,这些软件的官网都是 鹰语哦 看不懂的 请时刻 有道)\n\n
    在这篇教程里面,我们选择使用coding提供的 coding page服务 和 Hexo 博客系统\n\n

有人说:为啥不选 github?\n\n
A:为了照顾一些 英语捉急的朋友,还有就是 这里是 China 所以github 有时候不稳定。\n\n

又有人说:为啥不选 jekyll 博客系统\n\n
A:我乐意 咋滴 不服? 你来咬我呀~我就高兴选择 Hexo,我才不会告诉你jekyll 我自己都还没用过因为我嫌弃 它 前期需要安装的东西太多\n\n\n\n

OK. 话不投机半句多,哦不,是话不多说,正式开始\n\n

Step 1:\n

首先 让我们打开 coding的网站: coding.net,然后注册一个账号。(这个总会吧?不需要我一个个截图给你演示吧?这个再不会的话,你就不用往下看了,后面的内容会 超过你的智商上限的)\n

Step 2:\n

注册完之后 我们点击左侧的项目菜单进入 项目页面\n\n

\n\n

我们 对应填入 项目名称和项目描述, 后面的你都不用管 不过 免费的 coding用户只能最多创建5个私有项目,所以 建议选择 公开,反正也没人会吃饱了撑的 去动你的 项目的,Trust Me\n\n

\n\n

创建完之后 你的博客的 服务器部分 的 第一阶段 算是完成了。。。\n\n

怎么样 很简单吧?别急,还没完全结束呢,我们之后还要回来的。。。\n

Step 3:\n

在一开始的时候 我记得有 提到过 git\n\n

  • 如果你是mac,辣么恭喜你,你已经预装了git了,如果没有装的话 就去官网上 下载安装吧\n
  • 如果你是win,辣么乖乖去官网下载安装\n\n
    在一开始的时候 我也提到过 nodejs\n\n

辣么,不管你是win还是mac,请你们都去官网下载安装 系统对应的 最新版本吧\n\n

git和node的官网都是全英文的 不过。。。只是 下载 的话 这点程度的英文 你再不懂的话 你还是别往下看了会超出你的智商上限的。。。实在不懂但又想继续的。。。辣么。。。随时准备 有道 吧。。。\n\n

Step 4:

都已经到这一步了,git 装好了吧?node装好了吧?你们的编辑工具 下载好了么?安装好了吗?\n\n
What? 你说还没有?好吧 那你到这里可以暂停了,等待它(们)下载安装完吧。。。\n\n
那么,已经安装好了的朋友们,我们继续。。。

mac的朋友们打开你们的 Terminal(终端),win的朋友们打开你们的 cmd\n\n

然后你们的浏览器 打开 快戳我: https://hexo.io/zh-cn/docs/index.html 这个页面\n\n

在你电脑中你 看着顺眼的位置 新建一个文件夹 给它个名字,然后在你的 Terminal / CMD 中 使用命令指向到 这个文件夹 "cd 你的文件夹路径" 然后你就根据 上面这个页面中的 步骤 安装 hexo 命令,\n\n

安装完之后 https://hexo.io/zh-cn/docs/setup.html 再根据这个页面的 介绍 安装 hexo系统\n\n

然后 我们再执行\n

npm install hexo-deployer-git --save

这个命令 安装 你博客的发布工具\n\n

辣么 恭喜你 到此 你的博客系统已经安装完毕了!是的呢,看上去辣么多文字,其实 实际操作起来 贼TM简单\n

Step 5:\n\n

OK 到这一步了就很简单了。。。对你的hexo 系统进行一些简单的配置\n\n

用你刚才安装的 编辑工具 打开 hexo系统 所在的文件夹(别告诉我你忘了装哪了,那么就去屎吧)\n\n

找到最外面的 _config.yml 文件 并打开它,\n\n

\n\n

我们看到 有这么几项: title subtitle description author language timezone\n\n

我们一个个介绍

title: 博客的名字\
subtitle:副标题
description:博客的描述(这个影响seo)
author:作者
language:博客的主语言
timezome:时区

现在 我们回到 coding里刚才新建的项目里面\n\n

\n\n

一开始 deploy 里只有type 这一项,另外两项需要自己补充\n

type:类型 填 git
repo:git地址 (就是刚才让你复制的那个 地址)
branch:分支 填 master

ok 完成了!\n\n

开始写你的第一篇博客吧\n

我们回到 Terminal / cmd 里面 输入\n\n

hexo new 测试

然后 回到编辑器,你会发现 在 source 文件夹下 出现了一个 _posts 文件夹,里面多出了一个 叫 测试.md 的文件

双击打开 测试.md 文件


tags 这里是文章的标签 添加你想要的 标签
这么写

然后在 tags 下面的 三个横杠 下面 就是你博文的正文了,

不过 hexo写作是用的 markdown形式,如果你不懂 markdown 没关系,很简单 百度一下就行了,markdown 很容易上手 而且写作速度也很快(如果你还懂点 html 那你就无敌了,markdown满足不了的时候 你就可以直接添加 html标签)

预览

假设 现在 你已经写完了你的博文了,我们如何预览呢?

回到Terminal / cmd 中 看看 是不是还是指向在 hexo系统所在的 目录,如果不是 请人工指向过来 然后 输入 hexo s
然后等待
直到 Terminal / cmd 中 出现如下文字

INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop

如果没有出现上述文字 说明出错了,具体为什么 我们啥时候有空再说 或者在文后留言\n\n
然后我们在 浏览器 地址栏中 输入\n

localhost:4000

看!你的博客和博文出现了!检查一下 没问题的话 我们就要准备正式发布了!\n\n

发布\n

假设 现在 你已经检查完博文了,那么如何发布呢?\n\n

假设你已经完全按照我上述的步骤 一个没错 一个没跳过的 做了\n\n

好了 接下来 我们要发布文章了,\n\n

回到Terminal / cmd 中 看看 是不是还是指向在 hexo系统所在的 目录,如果不是 请人工指向过来\n\n

然后 输入\n

hexo g -d

然后 会要求你 输入 你的 coding的登录用户名和密码\n\n

按要求填入之后 发布就完成了\n\n\n

开启我们的博客\n

仅仅完成上述步骤 我们还不能让我们的博客在 公网上 被访问到,我们还有最最关键的一步没有做\n\n
现在回到coding的页面,在我们刚建的那个项目\n\n

\n\n

我们看到有个 pages服务\n
!!!!\n\n

我们可以看到如下内容\n\n

我们先选择部署来源 选 master分支\n\n

然后直接点 保存\n\n

然后就会出现\n\n

Coding Pages 已经运行在 httpXXXXXXXX\n\n

的提示,我们点击 这个 链接 就会打开我们的 博客啦!\n\n

惊不惊喜?刺不刺激?\n\n

如果你不满足于 coding给你的域名 那么你可以自己花钱 去买一个域名 然后 填入到 自定义域名中去,具体的步骤 看自定义域名 里面的 查看帮助\n\n

\n\n

OK 至此 你的免费的博客完成了,\n\n

但是 界面都是千篇一律啊 我想要一点自己的风格。肿么办?!\n\n

戳我!\n\n\n

选一个 你喜欢的主题\n\n

然后 进入到你的 terminal/cmd 只想到你的 hexo文件夹\n\n

使用\n\n

git clone xxxxxxxx theme/xxx

命令下载下来主题,然后在最外层的 _config.yml 中 找到 theme 把 landscap 改成你刚下的主题的文件夹名字就OK了。。。\n\n

任何修改之后 都不要忘记\n\n

hexo g -d

主题内一些图片 头像 特效的 修改 请参见 你所下载的主题的说明页面\n\n\n

更多的 hexo使用技巧 请看 hexo官方的 doc

建议打赏金额1-10元

支付宝打赏

微信打赏

最近的文章

HTML5 离线缓存-manifest简介

起源 html5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比…

H5, 离线缓存 继续阅读
更早的文章

npm入门

原文:https://zhuanlan.zhihu.com/p/27539908 npm是每一位前端工程师都必须具备技能,本文结合最新的npm v5讲解npm使用方法,因本人使用window…

npm 继续阅读
comments powered by Disqus
沪ICP备15043964号-3