手把手教你搭建个人博客|使用Hexo框架(一)

  昨天下午在B站看到Up主CodeSheep的搭建个人博客的视频,是使用hexo框架搭建,然后部署到Github或者Gitee等的方法,视频已经是一年前的了…地址在这里;跟着学了学,熟悉Git的应该很轻松就可以做个人博客,简单记一下笔记(还不熟悉MakeDown编辑,顺便还可以在简书学一下):

注:我是用Windows10系统电脑做的, Mac os、其他系统可能略有不同。

一、环境搭建

1.安装Node.js

打开官网下载地址

Node.js下载页面

下载之后正常安装,一直Next就可以。
安装完毕之后可以查看安装是否成功,打开命令行(快捷键Win+R,输入cmd回车),输入[node -v](方括号内的内容),之后回车,可以看到Node.js版本号,输入[npm -v](方括号内的内容),之后回车,可以看到npm工具的版本号,如看到和下方图片类似即安装成功,否则建议重装试试。
nodejs安装

2.安装Git

打开官网下载地址
下载相应系统和版本的安装包。

GitDownLode.png

同样正常安装就可以,安装之后可以在开始菜单中看到如下图Git工具。
Git.png

注:Git Bash可当作类似Linux和Mac OS的终端窗口使用,之后就用Git Bash打开终端,也可以使用Win命令行。

3.环境变量配置

1.右键我的电脑,打开属性;
2.选择→高级系统设置→高级→环境变量,直到看到下方页面;


环境变量.png

3.然后选中系统变量中的Path(如果有的话,否则新建)并点击编辑;


新建环境变量.png

4.选择新建,在红色箭头处填入Git安装地址的bin目录,如“D:\Program Files\Git\bin”;
5.点击确定保存。

二、搭建Hexo框架

注:这一步创建博客的本地资源目录,搭建Hexo框架,使用hexo命令对内容进行操作

1.新建Blog文件夹

这个文件夹在本地保存你的博客或者网页的全部资源(包括博客主题、文章、设置等),之后的操作和修改都在此文件夹中进行,可以放在你想放的目录并且自定义命名,这里在文档中创建MyselfBlog文件夹。之后如果操作错误或者重新写内容,这个文件夹删掉重建也没关系。

2.安装Hexo框架

1.如果之前工具安装没有问题的话,在此文件夹右键可以看到Git Bash Here,如下图:


GitBashHere.png

    点击打开GitBashHere。


GitBash.png

2.由于需要使用的npm工具服务器在国外,会影响下载安装插件的速度,所以建议安装淘宝团队开发的国内镜像cnpm,方法为,在终端输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org

回车,等待安装cnpm,直到安装完成:


cnpm.png

在终端输入cnpm,检测安装是否成功,成功会显示如下:


cnpm-success.png

3.安装hexo,在终端输入:

cnpm install -g hexo-cli

之后输入:

hexo -v

出现下图所示则安装成功:


hexoinstall.png

3.hexo初始化

在终端输入:

hexo init

等待初始化,当在终端中看到下图:


hexoinit.png

并且查看文件夹中,有如下图中文件,说明初始化已完成。


sourcefiles.png

这里面的文件就包含所有博客主题、资源文件和设置信息等。

4.测试本地链接localhost

注:在对hexo框架进行操作时,主要有以下几个命令:

hexo cl #清理缓存文件
hexo g #生成文件
hexo s #启动服务器
hexo d #上传服务器(后面使用)

在终端中输入:

hexo s

启动服务器,可以看到运行地址:http://localhost:4000

hexo s.png

在浏览器中打开此链接,可以看到:
hello world.png

看到上图说明已经成功,我们的hexo网页已经可以使用了,显示的是默认主题。
如果浏览器打开时候显示拒绝此访问,可以查看是否因为在终端中使用Ctrl+C导致hexo关闭,是则重新键入hexo s指令;或者是因为4000端口已被占用,则输入:

hexo s -p 5000

换用端口进行启动。

  到目前为止,一个基于本地服务器的页面已经可以使用,在我们创建的文件夹的\source_posts文件夹中可以看到hello-world.md文件,即为我们刚才打开页面中的Hello World文章的文件,_config.yml文件是有关页面的设置的文件,themes文件夹中包含页面主题的各种信息,页面的美化就通过更改这些内容,我在之后会演示如何进行设置和编辑。
  此时的页面只能在自己的电脑上看到,想让其他人都可以打开这个页面,需要将它部署到远端,我会在下一篇进行介绍。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。