欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Hexo+Github博客搭建之环境准备篇

程序员文章站 2023-12-24 12:00:21
...

转载此文章前,请先联系作者,经作者同意后再转载,并请注明原文链接和作者,整理这些不容易,最终版权归作者所有,谢谢合作!

前言

你了解Hexo吗? Hexo是一个静态博客框架,基于Node.js,将Markdown文章通过渲染引擎,生成一个静态网页,再结合Git命令(ssh),Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

几个月前偶然间了解到了Hexo这个静态博客网站,很适合那些喜欢写作的朋友们,最重要的是它是免费的,里面有许多的博客主题模板,这些主题都是一些很牛的大佬们开发的,而且设计的主题都很棒,让我很心动,心动不如行动,于是开始整理搭建属于自己的博客。直到今天,这中间经历了许多的坎坷荆棘​,我将我的博客搭建的流程分享出来,能为那些博客小石榴们提供一些帮助吧,如果有错的话,请给我留言,我会及时修改,废话不多说,直接上教程。

如果下面的教程有错误之处,请在评论区留言,收到后,我会尽快修改,谢谢支持!

博客环境搭建

本文系统环境信息:Win10专业版,64位(10.0 版本18362)

Node.js:12.13.0 Git:2.24.0

修改配置文件要用到的软件(可选):

  1. Visual Studio Code(适合有开发基础的程序员,非常好用)
  2. Sublime Text3,可免费使用,百度网盘(提取码:mh0y)
  3. NodePad++ 7.8.1(最新的,也可以在官网选择其他版本)

下载Git和Node.js

Node.js的安装与配置

首先去Node.js官网 下载node.js的安装程序,根据你电脑系统的配置信息,下载对应的安装程序,然后开始进行下面的步骤。

Hexo+Github博客搭建之环境准备篇

下载好与电脑系统对应的安装程序后,开始安装流程:

  1. 打开下载好的Node.js安装程序,点击Next,进行下一步的安装;

Hexo+Github博客搭建之环境准备篇

  1. 将"I accept the terms in the License Agreement"前面的复选框勾选,同意安装协议,再点击Next,进行下一步操作;

Hexo+Github博客搭建之环境准备篇

  1. 选择Node.js安装程序的安装位置,在这里我以"C:\Program Files\nodejs"为例,点击Next,进入下一步操作;

Hexo+Github博客搭建之环境准备篇

  1. 选择安装的模块和功能,这里全部安装,并添加到系统环境变量 ,继续点击Next,进入下一步操作;

Hexo+Github博客搭建之环境准备篇

  1. 这一步可以跳过,这个选项的意思是安装一些编译本地模块的工具,比如python,C/C++等,点击Next,进入下一步;

Hexo+Github博客搭建之环境准备篇

  1. 点击"Install",等待Node.js安装完成;

Hexo+Github博客搭建之环境准备篇

  1. 当看到下图所显示的情况,Node.js就成功安装完毕。

Hexo+Github博客搭建之环境准备篇

  1. 验证安装,并测试Node.js是否加入环境变量,当出现如下图的情况,Node.js安装大功告成。

Hexo+Github博客搭建之环境准备篇

如果执行node -v报错的话,那么手动将Node.js的安装路径添加到环境变量中,右击点击我的电脑 ->属性 -> 高级系统设置 -> 环境变量,在系统变量下找到名为path的变量名,如下图:

Hexo+Github博客搭建之环境准备篇

选中path,或者双击,然后将你node.js的安装路径放在path变量值的最后面,如果添加之前path值最后有 英文的分号,则直接将路径添加进去即可,如果没有,先添加分号,然后点击保存,回到桌面,打开cmd(Win+R),执行node -v,看是否成功。

  1. 设置npm的镜像源:
# 查看npm的配置
npm config list
# 默认源
npm config set registry https://registry.npmjs.org
# 临时改变镜像源
npm --registry=https://registry.npm.taobao.org
# 永久设置为淘宝镜像源
npm config set registry https://registry.npm.taobao.org
# 另一种方式,编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org
  1. 设置npm的内置路径——>全局模块路径和缓存路径(可选

如果不改变内置路径也可,除非你的C盘空间足够bigger,这一步可以略过,不改变的话,它的路径在:

此处参考:jyjin的node环境变量配置,npm环境变量配置

  • npm包全局目录:
C:/Users/[username]/AppData/Roaming/npm/node_modules
  • npm包全局命令目录:
C:/Users/[username]/AppData/Roaming/npm
  • npm实际去找全局命令的目录:C:/Users/[username]/.npmrc 文件内容的prefix
  • npm包全局cache目录:C:/Users/[username]/.npmrc 文件内容的cache

首先在你Node.js的安装位置,新建两个文件夹,node_globalnode_cache,我的路径是:

C:\Program Files\nodejs\node_global
C:\Program Files\nodejs\node_cache

然后分别执行的命令就是:

npm config set prefix"C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

然后在配置环境变量,右击我的电脑 ->属性 -> 高级系统设置 -> 环境变量同样的位置,在用户变量的地方,找到path变量进行修改,修改值如下图:

Hexo+Github博客搭建之环境准备篇

Hexo+Github博客搭建之环境准备篇

然后就大功告成了,Node.js就安装完毕了,下面开始Git安装。????????????

Git的安装与配置

首先就是去Git官网下载Git,根据你电脑系统的配置信息,下载对应的安装程序,然后开始进行下面的步骤。

Hexo+Github博客搭建之环境准备篇

  1. 下载好Git的安装包,开始安装,打开安装包,出现如图的界面,点击Next:

Hexo+Github博客搭建之环境准备篇

  1. 选择你要安装的位置,我以C盘为例,路径为图中所示,安装到其他位置的话,点击Browse,选择你要安装的位置,然后点击Next,进入下一步:

Hexo+Github博客搭建之环境准备篇

  1. 选择你是否创建桌面快捷放方式,其他默认即可,点击Next,进入下一步:

Hexo+Github博客搭建之环境准备篇

  1. 是否将Git快捷方式的目录加入开是菜单栏

Hexo+Github博客搭建之环境准备篇

  1. 这个是选择文本编辑器的方式,默认是Vim,也可以选择其他的方式,自主选择,在这里我选择的Vim默认方式。选择好文本编辑器的方式后,点击Next,进入下一个流程:

Hexo+Github博客搭建之环境准备篇

  1. 选择安装 Git 时对环境变量PATH的影响,第一种影响较小,第三种会影响到Windows的自带工具,默认勾选中间项,建议不要修改,直接点击 “Next” 继续安装:

Hexo+Github博客搭建之环境准备篇

  1. 选择 Git 在使用 HTTPS 时使用的库,若无特殊需求,可保持默认选项,点击 “Next” 继续安装:

Hexo+Github博客搭建之环境准备篇

  1. 选择提交与拉取记录时,对换行符的处理方式,若无特殊需要,默认选择即可,点击 “Next” 继续安装:

Hexo+Github博客搭建之环境准备篇

  1. 选择模拟终端软件(即命令行窗口软件),若无特殊需要,可默认选择,点击 “Next” 继续安装:

Hexo+Github博客搭建之环境准备篇

  1. 最新功能的询问,若不想尝试尚未保证稳定性的新功能,默认不勾选,点击 “Install” 即可完成安装:

Hexo+Github博客搭建之环境准备篇

  1. 安装完成

Hexo+Github博客搭建之环境准备篇

  1. 回到桌面,点击鼠标右键,会出现两个选项Git GUI HereGit Bash Here,在打开Cmd(Win+R),分别输入gitgit --version,如果出现如下图的情况,即安装成功!

Hexo+Github博客搭建之环境准备篇

Hexo+Github博客搭建之环境准备篇

上一篇:

下一篇: