手把手教你搭建个人博客|使用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文件夹中包含页面主题的各种信息,页面的美化就通过更改这些内容,我在之后会演示如何进行设置和编辑。
  此时的页面只能在自己的电脑上看到,想让其他人都可以打开这个页面,需要将它部署到远端,我会在下一篇进行介绍。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 228,443评论 6 532
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 98,530评论 3 416
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 176,407评论 0 375
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 62,981评论 1 312
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 71,759评论 6 410
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 55,204评论 1 324
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 43,263评论 3 441
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 42,415评论 0 288
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 48,955评论 1 336
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,782评论 3 354
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,983评论 1 369
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 38,528评论 5 359
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 44,222评论 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,650评论 0 26
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,892评论 1 286
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 51,675评论 3 392
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 47,967评论 2 374