前言
最近两个月应该是程序员们寻找新工作环境的高峰时期, 在同等技术能力下如何使得 HR 对你高看一些呢? 我是一个喜欢学习新知识, 时刻关注行内新技术的持续学习者? 嘴上说说可不行, 你得有料呀. 拥有一个好的个人博客也许不能证明你的技术有多 niubility, 但至少表明了你也是一个有自己想法, 喜欢学习, 写文章的人呀! 所以在此重要时期我也不耽误大家的时间了, 直接切入主题: 这是一篇教你快速搭建自己博客并进行上线部署的文章. 不管你是不是前端, 不管你对 Hexo https://hexo.io/zh-cn/ 了解多少, 只要你按照下面的步骤一步一步来, 我保证你能够在个把小时里创建出你想要的个人博客.
看下效果?
我们在去做一件事之前肯定是抱有一定的目的性, 在你被这个标题吸引进来之后我想我就知道你的目的了. 所以先来看看接下来要搭建的博客的最终效果: 霖呆呆的个人博客: https://lindaidai.wang https://lindaidai.wang
30 秒了解 Hexo
Hexo 是一个快速, 简洁且高效的博客框架. 它使用 Markdown https://daringfireball.net/projects/markdown/ (或其他渲染引擎) 解析文章, 在几秒内, 即可利用靓丽的主题生成静态网页. 也就是能帮助我们快速的搭建自己的博客. Hexo 博客搭建的基础大致为:
安装 node.JS
安装 Git
安装 Hexo
创建 Hexo 项目并进行本地测试运行
注册 GitHub 并创建一个存放 Hexo 博客项目的仓库
部署上你的博客项目
修改博客主题 theme
前期准备
安装 node.JS
如果你的电脑上已经安装了 node.JS 的话则你可以跳过这一步骤. Hexo 是基于 node.JS 的, 所以我们在安装它之前需要用到 NPM 安装工具, 这个工具是 node.JS 安装包的工具, 所以, 我们先要安装 node.JS. 安装 node.JS 很简单, 直接去 Node.JS 官网 https://nodejs.org/en/download/ 下载对应的版本就可以了. 下载安装完毕之后可以进行检测一下, 看是否正常安装. 打开你的 cmd(终端), 输入 node -v 回车, 看是否显示了版本号. 比如我这里显示的是
v10.14.1
证明安装完毕. 安装完毕了 Node.JS 之后, 你的电脑就自带了 NPM, 你就可以使用 NPM 的指令来下载其它东西了. 比如我们可以先装一个 cnpm. 它其实就是一个淘宝 NPM 镜像, 在国内来说会使下载速度快一些.
- $ NPM install cnpm -g
- // 或者
- $ NPM i cnpm -g
($ 符号不需要打出来, 只是表示这个指令是在终端上运行的,-g 表示的是全局安装, 这样你就可以在你电脑的任意文件夹下使用)
安装 Git
如果你的电脑上已经安装了 Git 的话则你可以跳过这一步骤. 直接去官网上下载安装: Git 下载地址 https://git-scm.com/downloads 我们知道 Git 的主要作用是代码托管, 这里为什么也要用到 Git 呢. 是因为我们在创建完了博客项目之后需要将其部署到 Git 上, 相当于上线这个博客, 这样其他人就能通过一个网址直接访问你的博客了. 想了解 Git 的小伙可以看这里: Git 基础知识 - 霖呆呆 https://lindaidai.wang/otherSkill/Git/basicGit/
安装 Hexo
现在我们可以使用 NPM 或者 cnpm 来安装 hexo 了:
$ NPM i hexo-cli -g
同样的你在安装完毕之后可以使用指令来查看是否安装成功:
$ hexo -v
如下图:
创建博客
前期准备都完毕之后, 让我们来创建自己的第一个博客吧.
创建一个名为 my-hexo-blog 的网站
将终端上的路径设置为你想要放博客项目的路径. 比如我想把我的博客项目放到 D 盘的 projects 文件夹下, 则在终端打开 D://projects. 进入了文件夹下, 在终端输入指令:
$ hexo init my-hexo-blog
你不想用 my-hexo-blog 这个名字的话用其他的也可以. (如果不写 my-hexo-blog, 就会在当前目录进行初始化. 如果后面跟了名子就会创建目录并在目录进行初始化操作, 以这个名子为目录名.)
本地运行博客
执行完 init 指令之后, 会看到你的目录下多出了一个 my-hexo-blog 文件夹, 这个就是你刚刚生成的博客项目. 你看到的应该是这样的文件夹:
此时我们在进入这个项目的目录里. 使用指令:
$ cd my-hexo-blog
跳转进项目目录.
进入到项目目录之后, 在执行指令:
- $ NPM install
- // 或者
- $ NPM i
- // 或者
- $ cnpm i
用于安装项目的依赖 (你可以把它理解为 java 中的各种包).
接下来我们就可以来启动它了, 使用指令:
- $ hexo server
- // 或者
- $ hexo s
此时, 它会提示你
- INFO Start processing
- INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
也就证明你的博客项目已经启动了, 你只需要打开浏览器并在网址中输入 localhost:4000 即可访问你的博客了. 可以看到, 博客应该是长这样的:
部署博客项目
通过上面的步骤我们已经使博客项目在本地正常的跑去来了, 下面该如何部署上线呢?
创建 GitHub 账号并创建一个仓库
创建仓库
如果你有自己的 GitHub 账号的话登录即可, 没有的话在 https://github.com/ 上先行创建. 登录成功之后点击右上角的 New repositories 创建一个新的仓库, 用于你的博客部署.
这个仓库的名字需要和你的 GitHub 名对应, 格式: yourname.GitHub.io 由于我的 GitHub 名为 LinDaiDai, 所以我创建的项目名为
- LinDaiDai.GitHub.io
- .
查看 SSH
SSH 公钥默认储存在账户的主目录下的 ~/.SSH 目录. 在终端输入:
$ cd ~/.SSH
$ ls
如果返回 something 和 something.pub, 说明已经有 SSH 公钥. 如下图:
如是没有 SSH 的话则需要手动生成. 还是在. SSH 目录下, 执行命令:
SSH-keygen -t rsa -C "你的邮箱地址"
按 3 个回车, 密码为空.
在 C:\Users\Administrator.SSH 下, 得到两个文件 id_rsa 和 id_rsa.pub.
GitHub 上添加 SSH 密钥
打开 id_rsa.pub, 复制全文到 https://github.com/settings/ssh ,Add SSH key, 粘贴进去.
修改博客项目目录下的_config.YAML 配置文件
打开我们博客项目目录下的_config.YAML 文件 (使用记事本或者 Notepad++ 直接打开) 在该文件的最下面加上以下代码:
- deploy:
- type: Git
- repository: Git@GitHub.com:LinDaiDai/LinDaiDai.GitHub.io.Git
- branch: master
将 repository 中的地址换成你刚刚新建的仓库的地址即可. Ctrl + s 保存修改. 注意: 在 type 前面需要增加两个空格, 在 type 的冒号后面需要增加一个空格. 请保持代码风格一致, 否则会出现错误或是不正确的问题.
安装部署使用到的 Git 插件
在这里我们使用的是 Git 源码管理工具, 所以, 我们需要安装 Git 包来进行部署, 安装这个插件才能使用 Git 进行自动部署. 在博客项目目录下执行指令:
$ NPM i hexo-deployer-Git --save
自动生成网站并部署
当我们部署网站前, 需要先生成静态网站. 它会自动在目录下创建 public 的目录, 并将新生成的网页存放在这个目录里. 只需要在博客项目目录下执行指令:
$ hexo g
此时就会生成 public 目录.
然后进行自动部署网站:
$ hexo d
上面的两步你可以合成一步:
$ hexo g -d
部署成功后会提示:
[INFO] Deploy done: Git
如果在部署时出现一下错误信息, 请参考上面的步骤进行 Git 插件的安装
ERROR Deployer not found: Git
上面的步骤全部完成之后, 恭喜你, 你已经成功完成了个人博客的部署上线, 此时打开你的浏览器并输入 https://userName.github.io 看看吧.
当然成功部署上博客只是第一步, 如何把自己的博客维护好才是以后一直要做的事, 世上最难的事只怕就是坚持, 加油...
来源: https://juejin.im/post/5c91edcb6fb9a070f03cf521