node.js + hexo搭建个人博客网页

hexo搭建个人博客网页

1 hexo是什么?

hexo是一个快速,简洁且高效的博客框架,
也可以理解为是基于node.js制作的一个博客工具


2 安装插件

(1)node.js插件
	首先清楚node并不是一个web服务器。node.js只是计算机上执行代码的一种方式,简单来说node.js是
运行在服务端的JavaScript。
	node.js是一个基于Chrome V8引擎的JavaScript运行环境,可以让JavaScript运行在服务端的开发平台;
用于方便地搭建响应速度快、易于扩展的网络应用。
	node使用事件驱动,非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实际应用。
	因为采用了“事件循环”的架构(既能提高性能,又能降低开发复杂度),使得编写可扩展性高的服务器变得
既容易又安全;采用的“非阻塞”库是支持事件循环的方式,本质上就是为文件系统、数据库之类的资源提供接口。
向文件系统发送一个请求时,无需等待硬盘寻址并检索文件,硬盘准备好的时候非阻塞接口会通知Node。
该模型以可扩展的方式简化了对慢资源的访问,直观、易懂。
下载路径:https://nodejs.org  ,下载有LTS后缀的安装包,按照默认安装教程安装即可

(2)git插件
git是一个开源的分布式版本控制系统。可以高效,高速的处理从很小到很大的项目版本管理。分布式相比于集中式
的最大区别在于开发者可以提交到本地,每个开发者通过克隆(git clone),在本地机器上拷贝一个完整的git仓库。
下载路径: git官网下载,下载速度较慢。
		   淘宝镜像网站:https://npm.taobao.org/mirrors/git-for-windows/
环境配置:
		按照教程安装,安装完后,要配置一下git的用户名和邮箱(在git bash here)  
		配置用户名     
			$  git config --global user.name "Jasper-Xu1"  (和仓库的用户名一致)
		配置邮箱      
			$  git config --global user.email "[email protected]"
		可以用查看是否配置成功    
			$  git config --global --list
配置github密钥
		生成SSH    
			$ ssh-keygen -t rsa
		生成文件夹.ssh 其中有两个文件(id_rsa和id_rsa.pub),将ssh文件夹中的公钥(id_rsa.pub)添加到github中
	公钥名称随便写(SSHkey),密码即为id_rsa.pub中的内容
		在git bash中输入命令,查看配置是否成功,成功会有提醒。
			$   ssh -T [email protected]

3 安装hexo的框架

确认node.js的版本,并确认是否安装成功:  
	$  node -v
确认npm的版本,并确认是否安装成功:    
	$  npm -v
	(npm是包管理器,cnpm的淘宝镜像的包管理器,和node.js配合使用)
		为什么要包管理器?在node.js上开发时,会用到很多别人写的JavaScript代码,如果在网站上根据名称搜索,
	下载,解压,再使用,非常繁琐。因此一个集中管理的工具应运而生,大家把自己开发的模块打包放在npm官网上,
	如果要使用,直接通过npm安装就可以使用,不用管代码存在哪,从哪下载的问题。
	 npm允许用户从NPM服务器下载别人编写的第三方包到本地使用;
	 npm允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用;
	 npm允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
在安装hexo博客框架之前,先安装npm包管理器(npm的下载太慢),需借助cnpm安装淘宝的源
	$  npm install -g cnpm --registry=https://registry.npm.taobao.org
	在npm中,  -g 是全局安装,
	           -S 表示写入的需要发布到生产环境的
			   -D 表示写入的插件只用于开发环境,不用于生产环境。
确认cnpm的版本,并确认是否安装成功:    
	$  cnpm -v
再正式使用cnpm安装hexo的框架(下载)
	$  cnpm install -g hexo-cli
确认hexo的版本,并确认是否安装成功:
	$  hexo -v

备注:hexo-cli 是hexo命令行项目,作用是:
启动hexo 命令(进程),及其参数解析机制;
实现hexo命令的三个初始参数(功能);
加载hexo核心模块,并初始化。


4 搭建博客

首先建立一个文件夹:
	$  mkdir blog
更换到目标目录:
	进入下一层  $  cd blog
	进入下两层  $  cd blog/blogs
退回到根目录:
	退回一层  $  cd ../
	退回两层  $  cd ../..
查看文件夹中的内容:
	$  chdir
查看当前文件夹的路径:
	$  dir		/(ls -l)
hexo生成博客/初始化博客
	$  hexo init
启动博客:
	$  hexo s  (server)
	再本地生成博客网页,地址  https://localhost:4000
	可以用ctrl + c断开
博客已经搭建完成了,可以在网页博客里写博客了
新建一篇文章;
	$  hexo n "我的第一篇博文"
更换目标目录查看:
	$  cd source/_posts
	查看路径:
		$  dir
开始编辑博文中的内容,可以用vim编辑,也可以使用NodePad++来编写;
编写完成后,再重新将网页生成一遍:
先清理:
	$  hexo clean
再生成,生成将要发布的博客网页 包含html在内的静态资源;
generate主要做了两件事,即将文本从markdown到html的过程,两次模板渲染,两次的渲染各不同。
	$  hexo g  (generate)
再启动,为hexo在本地发起一个http server.然后可以通过浏览器来访问
	$  hexo s   (server)

5 将博客部署到远端(github)

登录github,没有github账号的去注册一个,新建一个仓库。(仓库名必须和GitHub账号名一致,否则会出问题)
在已经安装好git的前提下,装一个git的布置插件:
	$  cnpm install --save hexo-deployer-git
在blog文件夹下,在_config.yml文件中进行一些配置(Nodepad++/vim)
	在deploy后面修改配置(冒号后面有一个空格,不加空格会卡死)
		type: git
		repo: https://github.com/Jasper-Xu1/Jasper-Xu1.github.io.git   (新建的仓库的地址)
		branch: master
配置完成后,将hexo部署到远端:
	$  hexo d (deploy)
		第一次部署的时候,要输入如github的用户名和密码	
部署完成后,后面就可以通过仓库地址来访问博客了
	我的博客:$  https://Jasper-Xu1.github.io.git

6 修改主题

先从github上下载一个主题(使用git clone 地址  或者克隆SSH地址  要自己下载)
下面一个例子,下载github上的主题,并下载到blog/themes/yilia的路径下:
	$  git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
查看一下路径,看下载是否成功:
	$  cd themes
	$  dir
查看完成后要退回blog根目录。
	$  cd ../
修改一些关于主题的配置,在_config.yml文件中修改默认主题(landscape)为yilia
再将博客重新生成一遍:
	先清理:
		$  hexo clean
	再生成,生成将要发布的博客网页 包含html在内的静态资源
		$  hexo g  (generate)
	再启动,为hexo在本地发起一个http server.然后可以通过浏览器来访问
		$  hexo s   (server)
	再部署
		$  hexo d (deploy)
	成功后,就可以通过仓库的地址来访问博客网页了。
		我的博客:$  https://Jasper-Xu1.github.io.git

7 搭建过程中遇到的问题

1.在使用npm(包管理器)的时候,因为国内的网速较慢,需借助淘宝的镜像
源cnpm,下载完成后,需确认cnpm的安装是否成功。
2. 记住搭建博客的几个重要步骤,先安装相关插件:node.js,git,npm。
然后才开始搭建博客的框架,加载核心框架hexo-cli,对框架初始化hexo init。
博客框架搭建成功后,建立新的文件夹,编辑文档,配置config相关属性,渲
染,申请调用,生成网页。即完成一个博客网页的搭建。
3.将博客网页推送到github上时,gitHub新建的仓库名必须和账号名一致,配置
config的时候,冒号:后面加一个空格。
4.在安装完git后,要配置一下git的用户名和密码。
5.在将本地网址推送到GitHub上时,如果http协议不行,可以替换使用SSH协
议,并且要配置SSH key。

你可能感兴趣的:(node.js + hexo搭建个人博客网页)