【金三银四加分项】也许你也应该有一个自己的博客了

前言

最近两个月应该是程序员们寻找新工作环境的高峰时期,在同等技术能力下如何使得HR对你高看一些呢?我是一个喜欢学习新知识,时刻关注行内新技术的持续学习者?嘴上说说可不行,你得有料呀。拥有一个好的个人博客也许不能证明你的技术有多niubility,但至少表明了你也是一个有自己想法,喜欢学习、写文章的人呀! 所以在此重要时期我也不耽误大家的时间了,直接切入主题: 这是一篇教你快速搭建自己博客并进行上线部署的文章。 不管你是不是前端,不管你对Hexo了解多少,只要你按照下面的步骤一步一步来,我保证你能够在个把小时里创建出你想要的个人博客。


看下效果?

我们在去做一件事之前肯定是抱有一定的目的性,在你被这个标题吸引进来之后我想我就知道你的目的了。所以先来看看接下来要搭建的博客的最终效果: 霖呆呆的个人博客: https://lindaidai.wang

30秒了解Hexo

Hexo 是一个快速、简洁且高效的博客框架。 它使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。 也就是能帮助我们快速的搭建自己的博客。 Hexo博客搭建的基础大致为:

  • 安装node.js
  • 安装Git
  • 安装Hexo
  • 创建Hexo项目并进行本地测试运行
  • 注册github并创建一个存放Hexo博客项目的仓库
  • 部署上你的博客项目
  • 修改博客主题theme

前期准备

安装node.js

如果你的电脑上已经安装了node.js的话则你可以跳过这一步骤。 Hexo是基于node.js的, 所以我们在安装它之前需要用到npm安装工具, 这个工具是 node.js 安装包的工具, 所以, 我们先要安装 node.js。 安装node.js很简单,直接去nodejs官网下载对应的版本就可以了。 下载安装完毕之后可以进行检测一下,看是否正常安装。 打开你的cmd(终端),输入node -v回车,看是否显示了版本号。 比如我这里显示的是

v10.14.1
复制代码

证明安装完毕。 安装完毕了nodejs之后,你的电脑就自带了npm,你就可以使用npm的指令来下载其它东西了。 比如我们可以先装一个cnpm。它其实就是一个淘宝npm镜像,在国内来说会使下载速度快一些。

$ npm install cnpm -g
//或者
$ npm i cnpm -g
复制代码

($符号不需要打出来,只是表示这个指令是在终端上运行的,-g表示的是全局安装,这样你就可以在你电脑的任意文件夹下使用)

安装Git

如果你的电脑上已经安装了Git的话则你可以跳过这一步骤。 直接去官网上下载安装: Git下载地址 我们知道Git的主要作用是代码托管,这里为什么也要用到Git呢。 是因为我们在创建完了博客项目之后需要将其部署到Git上,相当于上线这个博客,这样其他人就能通过一个网址直接访问你的博客了。 想了解Git的小伙可以看这里:Git基础知识-霖呆呆

安装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账号的话登录即可,没有的话在github上先行创建。 登录成功之后点击右上角的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,复制全文到 github.com/settings/ss… ,Add SSH key,粘贴进去。

修改博客项目目录下的_config.yml配置文件

打开我们博客项目目录下的_config.yml文件(使用记事本或者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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值