使用hexo+GitHub搭建步骤
使用hexo+GitHub搭建步骤
1. 下载Git和Node.js
1.1 Node.js的安装与配置
(1) 下载安装包
node.js下载网址: https://nodejs.org/en/download
下载完成后,双击安装:点击next,选择安装路径,
(2)添加环境变量
安装完成后,打开cmd验证安装情况:如下图,输入 node -v ,显示版本号则表明安装成功。(注;安装成功的同时也说明了nodejs已经添加到环境变量path中)
(3)接下来,需要设置npm的镜像源
- 查看npm的配置npm config list- 默认源npm config set registry [https://registry.npmjs.org](https://registry.npmjs.org/)- 临时改变镜像源npm --registry=[https://registry.npm.taobao.org](https://registry.npm.taobao.org/)- 永久设置为淘宝镜像源npm config set registry [https://registry.npm.taobao.org](https://registry.npm.taobao.org/)- 设置淘宝镜像源还可以使用另一种方式,编辑 ~/.npmrc 加入下面内容registry = [https://registry.npm.taobao.org](https://registry.npm.taobao.org/)
(4)设置npm的内置路径——>全局模块路径和缓存路径(建议**)**
如果不改变内置路径也可,除非你的C盘空间足够bigger,这一步可以略过,不改变的话,它的路径在:
- 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_global和node_cache
然后分别执行的命令就是:
npm config set prefix"C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"
(5)修改用户变量
然后在配置环境变量,右击我的电脑 ->属性 -> 高级系统设置 -> 环境变量同样的位置,在用户变量的地方,找到path变量进行修改,修改值如下图:
使用
替换
至此,node.js 安装完成。
1.2 Git的安装与配置
下载地址: https://git-scm.com/downloads
(1)下载,然后点击安装包进行安装,一切默认即可
(2)在cmd中敲 git 和 git --version ,如下图则表明安装成功。
2、Github注册以及Github Pages创建
这里就不多介绍了。
3、配置Git用户名和邮箱
在桌面点击鼠标右键,点击Git Bash Here
然后分别输入下面的两个命令,并回车:
4、本地安装hexo静态博客框架以及发布到Github Pages
首先选择一个磁盘作为你博客文件的存放位置,然后新建一个文件夹,比如名为blogtest的文件夹,创建完后,先不要点进去,在此处点击鼠标右键,选择Git Bash Here,然后依次输入如下命令:
注意,这里不知道是不是安装node.js时使用的是自定义路径,在执行了 npm install -g hexo-cli 后,也无法使用 hexo 命令,一直报错。
经查询(参考https://blog.csdn.net/qq_42893625/article/details/100852221):使用如下命令后安装成功:
最后解释一下,为啥要在前面加上npx。
在大牛阮一峰的网络日志中,他是这么描述的:“npx 想要解决的主要问题,就是调用项目内部安装的模块”,所以可以理解为在命令行下调用,可以让项目内部安装的模块用起来更方便,npx运行的时候,会到node_modules/.bin路径和环境变量$PATH里面,检查命令是否存在,所以系统命令也可以调用,即上面的命令安装不成功的时候加上npx的话也许就可以成功了哦~
浏览器中打开http://locakhost:4000或者127.0.0.1:4000,可以看到一个网页,说明Hexo博客已经成功在本地运行
5、 本地博客发布到Github Pages
5.1
首先需要安装发布的插件,在站点目录下执行下面的命令,也就是创建的博客目录下:
npm install hexo-deployer-git --save
5.2
紧接着,将本地目录与GitHub关联起来,输入下面的命令行:
ssh-keygen -t rsa -C "邮箱地址"
输入后一直回车,
然后在C:/Users/[username]目录下找到名为.ssh的文件夹, 文件夹内会有两个文件,一个id_rsa.pub一个id_rsa,用文本编辑器打开id_rsa.pub,复制里面的的内容。 然后打开Github,点击右上角的头像 Settings 选择SSH and GPG keys,添加ssh key 。
然后回到Git的命令行界面,测试一下是否与GitHub连接成功。输入下面的命令行:
ssh -T [git@github.com](mailto:git@github.com)
点击回车,然后会出现一个询问内容,输入yes,回车,会出现一段内容,
Hi ! You’ve successfully authenticated, but GitHub doesnot provide shell access.。
说明连接成功。此处这个应该是你Github的用户名。
5.3
进入博客站点目录,用文本编辑器打开_config.yml,这个_config.yml是博客的配置文件,在以后的博客修改,如个性化修改,博客SEO优化等都会使用到,修改如下图的几个地方:
滑到文件最底部,有一个deploy,在deploy下面添加一个repo项 ,一个branch项。填入如下代码,并如下图所示:
5.4
生成页面,并发布至Github Pages,执行如下命令:
上传完成后,在浏览器中打开https://<用户名>.github.io,查看上传的网页。如果页面变成了之前本地调试时的样子,说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息,没有的话清除一下浏览器缓存试试。
注:这几天一直使用的npx hexo 来当命令,直接使用报错,网上说是因为没用添加hexo 下的 node_modules.bin 文件
到环境变量中,但是我是加了这个到系统变量path中的,没起作用。
今天我又去这个文件夹下面找了一下,果然,里面有个命名为hexo文件,嗯,那应该就是添加这个了文件夹了。
于是了,我复制了目录,替换了原先的那个,保存后发现居然行了,额,真无语。
参考链接:https://blog.csdn.net/victoryxa/java/article/details/103733655
使用hexo+GitHub搭建步骤相关推荐
- Hexo+github搭建个人博客-博客发布篇
通过 Hexo+github搭建个人博客-环境搭建篇 以及 Hexo+github搭建个人博客-博客初始化篇 ,我们了解到了利用Hexo搭建个人博客需要的环境以及配置,下面这篇文章将会介绍如何把我们的 ...
- Hexo+github搭建个人博客-博客初始化篇
文章推荐 精选java等全套学习资源 精选java电子图书资源 精选大数据学习资源 java项目练习精选 上一篇博文 [<Hexo+github搭建个人博客-环境搭建篇>](http:// ...
- vsphere通用配置_Mac环境下如何用Hexo+Github搭建个人博客
一个爱折腾的人,总是忍不住去自己动手尝试新鲜事物.就拿写博客来说,虽然网上已经提供了很多博客平台,但是总有一些个性化的需要得不到满足.所以就抽空去网上找了下如何使用Hexo+Github 搭建自己博客 ...
- hexo部署成功但是没效果_使用 Hexo+GitHub 搭建个人免费博客教程(小白向)
前言 近些年来很多用户都喜欢使用 GitHub Pages 来搭建 Hexo 静态博客网站,其最吸引人的莫过于完全免费使用,并且非常稳定. 虽然搭建时比较麻烦,有点折腾,但是配置完成后,基本不需要操心 ...
- 利用 Hexo + Github 搭建自己的博客
扯在前面 在很久很久以前,一直就想搭建属于自己的一个博客,但由于各种原因,最终都不了了之,恰好最近突然有了兴趣,于是就自己参照网上的教程,搭建了属于自己的博客. 至于为什么要搭建自己的博客了?哈哈,大 ...
- win10+hexo+github搭建个人博客
win10+hexo+github搭建个人博客 参考:https://hexo.io/,博客用于记录自己的学习工作历程 参考以下步骤安装 1.搭建环境准备(包括node.js和git环境,gitHub ...
- 【小白】【新手向】Hexo+Github搭建个人博客
如题,一个[小白][新手向]的,关于Hexo+Github搭建个人博客. 针对于: 对于代码完全不懂的纯小白! 完全不知道什么是hexo,git和github的小白! 感觉像是在打广告,其实并不是.事 ...
- 猿创征文|Hexo+Github搭建完全免费个人博客详细教程
前言 完全免费的搭建个人博客,没有任何收费,零基础也能上手,不需要编程基础,跟着操作来即可. 首先: 要了解一下我们搭建博客要用到的框架:Hexo是高效的静态站点生成框架,它基于Node.js.通过H ...
- Hexo+Github搭建个人博客和个人主页
Hexo+Github搭建个人博客和个人主页 在自己的个人主页搭建起来之前,看到网上其他人酷炫的个人主页,而且有自己专属的域名,羡慕的不行.现在自己的个人主页也做出来了,在这里做一个总结,给也想做个人 ...
最新文章
- Android 正则表达式实例
- 讨论是学习最有效的方法
- app.vue中引用图片src=“../assets/logo.png“报错未找到图片
- java 跨平台 ios_OGEngine发布跨平台版本,支持iOS及Android
- 【转】软件开发常用术语
- 如何搭建apache+tomcat集群
- 如何在WP7中实时监控内存使用量
- 每天学点Python Cookbook(三)
- springboot整合mybatis-pluss、sharding-JDBC 水平分表demo
- 尚硅谷html+css小米官网
- 微信小程序地图polygons自己标点,三个点以上连成面
- win10计算机无法复制文件,Windows10系统无法复制文件到u盘的解决方案
- Failed to start LSB: Bring up/down错误解决方法
- Vue+JTopo(一)
- 水果店微信小程序定制开发需要多少钱【最新报价方案】
- HTML页面查看world等文件,网页文件 - HTML - 网页基础 - KK的小故事
- Padavan老毛子的二级路由,怎样设置与主路由在同一网段
- 频率超出范围黑屏Linux,Win10专业版分辨率超出工作频率范围黑屏怎么办
- 函数模板的特例化(专用化)以及类型含有const的特殊情况
- js创建一个电脑对象,该对象要有颜色、重量、品牌、型号,可以看电影、听音乐、打游戏和敲代码。