一文教会你如何搭建个人博客

2018-12-17 14:40:20 浏览数 (1)

阅读文本大概需要 10 分钟。

一、为什么要搭建个人博客?

1、如果我们热衷于技术,第一个可能想到的就是 Github ,Github 上各种开源的项目在我们小白初级阶段完全看不懂,但是我们既要融入这个全球最大的交友网站 Github上来,又要在 Github 上展现出我们对技术的热情,那么今天这篇文章就是你最好的一个选择,搭建一个个人博客,你可以不会html/css网页设计,可以不会软件开发,只要你按照这个流程走,就可以搭建起一个属于自己的个人博客,你写的文章可以传到个人博客,写的笔记也可以传到个人博客,你的开源项目也可以在个人博客做介绍。如果别人看到了你的文章并收获了很多知识,就会给你点亮一颗星,这颗星与QQ空间的点赞可不一样,如果你有一个文章或者一个开源项目点星到了100,那就说明你已经在里边很牛了,但是想得到这100个星也是很难的。

2、只有一个钟情技术的人,才会想像朋友圈一样每天关注 GitHub,维护 GitHub。所以你“绿油油”的 GitHub 是你的技术热情的最好体现。 那么,我们就从个人博客开始维护,面试的时候面试官看了你这 Github 上“绿油油的”一片,就知道了你对技术有多么热情,下图你会心动吗?

PS: 曾经一个技术很不错的小伙伴终面的时候挂了,面试系统中的备注是:“看不到他对技术的热情”。所以这也会作为面试的一个考量。

如果有两个人去面试,别人 Github 上“绿油油”一片,你的确是撒哈拉大沙漠,一点都体现不出你对技术的热情。

二、建站前的准备

建站之前我们先要做好准备工作,将相关的工具准备好。

1、安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

安装网址:https://nodejs.org/zh-cn/

验证是否安装成功:打开cmd命令行(win r 输入cmd回车)执行 :

代码语言:javascript复制
1node -v
2npm -v

安装成功之后显示版本号:

2、安装 Git

通常使用 github 的对 git 并不陌生,Git(读音为/gɪt/。)是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。 [1] Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

安装网址:https://www.git-scm.com/download/win

验证是否安装成功:打开cmd命令行(win r 输入cmd回车)执行 :

代码语言:javascript复制
1git --version

安装成功之后显示版本号:

3、安装 Hexo

Hexo 是一个快速、简洁且高效的博客框架。

了解更多关于 Hexo 请查看官方网站:https://hexo.io/zh-cn/

① 安装 hexo 框架

下面一起来看看怎么安装 Hexo 框架?

首先选择一个文件夹,这个文件夹主要存放关于你博客的配置文件以及以后要写的的文章,在该文件夹的根目录运行之前下好的 git-bash.exe 。

输入命令开始安装:

代码语言:javascript复制
1$ npm install -g hexo-cli

这里安装的是hexo最新版本,如果想安装以前的的版本请运行命令$ npm install -g hexo

以上步骤不出问题的话就已经在本地机器上搭建起了 Hexo 环境。

下面介绍 Hexo 的具体使用方法。

② 初始化Hexo

A、创建hexo工程

代码语言:javascript复制
1$ hexo init blog

创建一个文件夹blog(blog 为文件夹的名字,可改成自己想要的名字),使用 Hexo 命令初始化 blog 为 hexo 工程目录。

B、新建POST

代码语言:javascript复制
1$ cd blog
2$ hexo new “HelloWorld”

进入初始化后的 blog 文件夹,创建名为HelloWorld的文件,此时会在 /blog/sources/_post/ 目录下生成 HelloWorld.md 文件。

进入初始化后的blog文件夹,创建名为HelloWorld的文件,此时会在/blog/sources/_post/目录下生成HelloWorld.md文件。

C、生成静态文件

代码语言:javascript复制
1$ hexo generate

使用 Hexo 引擎将 Markdown 格式的文件解析成可以使用浏览器查看的 HTML 文件,HTML 文件存储在blog/public 目录下。

D、运行hexo服务器

代码语言:javascript复制
1$ hexo server

打开命令行提示的地址,一般是 :

http://localhost:4000/,既可以看到我们的 Hexo 网站。

此时 Helloworld 文章中没有任何内容。打开 /blog/sources/_post/ 目录,使用编辑器打开其中的 HelloWorld.md 并在其中添加 markdown 格式的内容保存,然后重新运行以下命令:

代码语言:javascript复制
1$ hexo generate
2$ hexo server

命令的含义:hexo generate 生成静态文件, hexo server 启动服务器。默认情况下,访问网址为: http://localhost:4000/。 如果重新改变端口号请详细查看官网文档,这里不多介绍。

注意:如果在 HelloWorld.md 文件中有中文,在网页进行浏览可能出现乱码,解决方式通过编辑器打开HelloWorld.md 文件把编码方式改成 utf-8 就可以了。

③ 安装主题

Hexo 提供了默认主题 landscape,主题的位置在 blog ->themes 文件夹下。主题根据自己喜好可以在网上找到,通过 Git 进行相应的下载。下面贴出几个主题可以进行相应的下载,喜欢哪一个可以进行配置到自己的个人博客了。

主题一:hexo-theme-next(我用的主题是这一个,后期是自己改进美化的)

主题二:Casper

主题三:daleanthony

主题四:hexo-theme-yilia

主题五:jacman

主题六:hexo-theme-apollo

我给大家找了一个主题链接可以选择自己喜欢的主题:更多主题

A、配置主题

代码语言:javascript复制
1$ cd /blog/themes

打开 git-bash 切换到 blog -> themes 目录下,如果在目录 blog ->themes 右键选择启动 git-bash 就不用切换了。如果在桌面直接启动 git-bash ,可通过下边命令切换到 blog ->themes目录下。

代码语言:javascript复制
1$ cd /blog/themes

选好一个主题,复制主题的 github 地址,通过 git 命令进行下载。(例:https://github.com/iissnan/hexo-theme-next 为一个主题的 github 地址)

代码语言:javascript复制
1git clone https://github.com/iissnan/hexo-theme-next

下载完之后我将文件夹改成 next 了(也可以不改,我为了名字简洁点)。

然后在修改 /blog/config.yml 文件,将其中的 theme 改成 next。(这个是改变主题的地方,如果你用的是其他的主题,将这个 next 改成你下载下来的主题的文件夹的名称)

重新运行以下命令,查看更换主题后的效果 :

代码语言:javascript复制
1$ hexo generate
2$ hexo server

三、申请 Github 免费静态内容空间

1、注册 Github 账号

我们去 Github 的官网进行账号注册 ,注册完成之后我们根据官方文档进行配置 ,然后我们使用自己的账户创建一个 Repository (仓库)。

点击网站右上角的 号,选择 New Repository( 注意:创建仓库的名字要你的注册的用户名一致。其他默认,确定创建)。

之后你的静态内容空间就已经创建好了,在浏览器输入你的 your username(用户名).github.io 就可以访问了。

四、将 Hexo 上传 Github 上

1、步骤一:安装 deployer-git (安装部署工具,方便以后更新)

代码语言:javascript复制
1$ npm install hexo-deployer-git --save

2、步骤二:在 /blog/_config.yml 中修改 deploy 属性(注意“:”之后有空格 ) 否则配置失败。

代码语言:javascript复制
1deploy:
2  type: git
3  repository: https://github.com/你的地址
4  branch: master

将上方的 Repository 换成你申请的 Git 仓库地址

使用 https 的方式部署每次提交到 Github 都要输入用户名和密码,如果嫌麻烦请使用 SSH 的方式,百度/谷歌自行搜索。

3、步骤三:初始化本地仓库

代码语言:javascript复制
1git init

4、步骤四:连接远程仓库 ( 如果是第一次使用 git,在使用 git 的时候会提示输入用户名和密码,用户名是自己的注册邮箱。 )

代码语言:javascript复制
1git remote add origin 你的仓库地址

点击原文可以查看小鹿的博客,预览一下博客效果哦。

0 人点赞