基础教程,Hexo搭建博客

2019-10-01 14:35 来源:未知

先来看看最终效果:https://handsomesuperred.github.io/

注意:本文是系列文章,请先看以下内容,再接着看本章节:

Windows下使用Github Pages+Hexo搭建博客(一)

Windows下使用Github Pages+Hexo搭建博客(二)

前言:博主目前大三,Web 前端爱好者。写博客的好处,不是为了写而写,而是一个记录思想的过程。不要考虑它能带给你什么,而是你自己从中收获了什么。

-此教程不仅面向计算机专业的同学,任何想搭建个人独立博客的同学,都可以来看看-
--By Y.R.H

图片 1

最近刚好有空,于是就参照网上的各种教程,搭建了一个博客。现在把 Hexo + GitHub Pages 搭建博客的完整过程记录下来:


效果

个人博客地址:http://www.lovebxm.com

摘要:本文是一篇关于如何在 Windows 下搭建一个独立博客的教程,里面介绍了如何使用 GitHub Pages 和 Hexo 搭建一个属于自己的博客,并配置它的过程。

Windows下使用Github Pages+Hexo搭建博客(三)

Windows下使用Github Pages+Hexo搭建博客(四)

Windows下使用Github Pages+Hexo搭建博客(五)

这次不再是准备,终于可以创建能够看见的个人博客了!!!继续干!

大概流程


1.Hexo安装

首先选择你的博客放置在哪个盘,如果你想放在F盘的Blog文件夹下,那先在F盘新建名为Blog的空文件夹,然后双击该文件夹进入,进入后在空白处单击鼠标右键,选择Git Bash here来打开Git命令行,如图一所示。同理,如果你想放在D盘的Hexo文件夹下,那先在D盘新建名为Hexo的空文件夹,然后双击该文件夹进入,进入后在空白处单击鼠标右键,依然选择Git Bash here来打开Git命令行。

图片 2

图一

如图二所示,打开Git Bash以后输入npm install -g hexo-cli安装Hexo,安装好以后不要关闭Git Bash,接下来还要用。Hexo有它的默认路径,能够看到Hexo都安装在了C盘。

图片 3

图二

  1. 搭建 Node.js 环境
  2. 搭建 Git 环境
  3. GitHub 注册和配置
  4. 安装配置 Hexo
  5. 关联 Hexo 与 GitHub Pages
  6. GitHub Pages 地址解析到个人域名
  7. Hexo 的常用操作
  8. 结束语

前言

偶然间发现我的姓名拼音的域名没有被人购买,心想,作为一名准程序员,怎么能把个人域名让给别人,于是勒紧裤腰带,花光身上仅剩的一点点积蓄将其买了下来,买下来后不知道用它能做点什么(我不会网页制作),想起了很久以前在知乎上看到的一个问题:如何搭建个人独立博客,心想闲着也是闲着,不如折腾一下,说不定就能成功,以后把学习笔记什么的都放到个人博客上,之后回味起来也方便,于是便开始查资料,经过两天的折腾,个人博客也基本成型了,搭建的步骤也差不多都很熟练了,于是便写下这篇教程,有两个目的:其一,熟练markdown的语法(此教程使用纯 markdown 写成),并整理下自己的思路,锻炼下自己的语言表达能力;其二,本着能帮一个是一个,大家一起讨论才能进步的原则,将自己所学到的知识分享给各位小伙伴,大家一起折腾起来,我们一同学习,一同进步。

有人可能会问为什么要写博客?请看这里

特别鸣谢:陈素封,我也是跟着他的教程一点一点学会的。
特别声明:此教程中部分内容转自cnFeat编写的教程大家也可移步去学习


2.Hexo部署

如图三所示,安装好Hexo后,继续在该Git Bash里输入如下命令进行初始化。如果刚才关闭了,那就按照图一执行一遍Git Bash就在当前目录了,或者直接使用cd命令进入指定的目录层级。

hexo init <folder>

cd <folder>

npm install

其中,<folder>是你要保存博客内容的文件夹的名字。

例如我想将博客保存在Hexo中,那我就使用hexo init Hexo命令。如果你不想用Hexo命名,你想将文件夹叫做Handsome,那你可以使用Hexo init Handsome命令。所以上面三个命令就是:

hexo init Hexo

cd Hexo

npm install

图片 4

图三

.

新建完成后,指定文件夹的目录如下:

├── _config.yml

├── package.json

├── scaffolds

├── source

|  ├── _drafts

|  └── _posts

└── themes

Hexo初始化成功以后,输入cd hexo进入Hexo文件夹,如图四所示。

再依次输入如下命令:

hexo generate

hexo deploy 

hexo server

图片 5

图四

然后系统会出现如下提示:

INFO  Start processing

INFO  Hexo is running at . Press Ctrl+C to stop.

这时再浏览器地址栏输入http://localhost:4000/,就可以看到如图五所示的默认博客界面。

图片 6

图五

3.将本地文件部署到 GitHub

修改 Hexo 中的根目录的 _config.yml 文件,在 Hexo 文件夹下找到 _config.yml 文件,如图六所示:

图片 7

图六

搭建 Node.js 环境

为什么要搭建 Node.js 环境? - 因为 Hexo 博客系统是基于 Node.js 编写的

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,可以在非浏览器环境下,解释运行 JS 代码。

在 Node.js 官网: 下载安装包 v6.10.3 LTS

保持默认设置即可,一路Next,安装很快就结束了。

然后打开命令提示符,输入 node -vnpm -v,出现版本号则说明 Node.js 环境配置成功,第一步完成!!!

图片 8

为什么要搭建独立博客

  • 1 独立的才是自己的
  • 2 锻炼自己的动手能力
  • 3 更好的宣传自己

找到其中的 deploy 标签,改成图七所示形式,并保存。注意:冒号后面要加上一个空格,否则会报错;还有改的时候将repo的用户名替换为你的用户名。

图片 9

图七

将其 deploy 到仓库中。

打开 Git Bash进入创建的Hexo文件夹(我命名叫Hexo,你要看你自己命名的叫什么),依次输入以下命令:

hexo clean

hexo generate

hexo deploy

如果出现下错误,别担心:

Error: Deployer not found : github

将图七deploy 的 type 改成 git,然后同时再在 Git Bash中运行以下命令:

npm install hexo-deployer-git --save

再重新来一遍:

hexo clean

hexo generate

hexo deploy

出现图八的提示,恭喜你,成功了!

图片 10

图八

这时就已经部署到 GitHub 上了,可以到你的GitHub仓库查看是否已经更新。

通过https://your_user_name.github.io(即你那个仓库的名称,形如https://你的 GitHub 用户名.github.io),就可以看到你的个人博客了。比如我的用户名是handsomesuperred,要看我的博客就在浏览器的网址输入https://handsomesuperred.github.io/即可。,

至此,终于搭建了自己的博客。但还没完,下一篇将写自定义自己的博客,让自己的界面变漂亮!加油,好累。

搭建 Git 环境

为什么要搭建 Git 环境? - 因为需要把本地的网页和文章等提交到 GitHub 上。

Git 是一款免费、开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。

在 Git 官网: 下载安装包 Git-2.13.0-64-bit.exe

图片 11

桌面右键,打开 Git Bush Here,输入 git --version,出现版本号则说明 Git 环境配置成功,第二步完成!!!

图片 12

新人须知

  • 1 请保持足够的耐心
  • 2 善于使用搜索引擎
  • 3 可以适当了解写网页制作的基础知识

GitHub 注册和配置

GitHub 是一个代码托管平台,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHub。

Github注册:

图片 13

创建仓库:Repository name 使用自己的用户名,仓库名规则:

注意yourname 必须是你的用户名。

yourname/yourname.github.io

图片 14

访问 yourname.github.io,如果可以正常访问,那么 Github 的配置已经结束了。

到此搭建 Hexo 博客的相关环境配置已经完成,下面开始讲解 Hexo 的相关操作

TAG标签:
版权声明:本文由金沙澳门官网4166发布于文物考古,转载请注明出处:基础教程,Hexo搭建博客