Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)

时间:2022-01-02 12:03:57

背景交代

相信每个程序员都有自己做过个人网站,博客之类的项目了,但是现在还在维护吗?反正我前前后后做过2到3个了,维护一段时间后因为一些不可逆的原因(主要是懒)都没有维护了,购买的一些域名和服务器信息也都过期了,最近玩了一下hexo,发现这个东西挺方便的,基本半个小时就可以搞完,并且如果 完全托管在github上基本就是0成本,用作学习记录输出是够了。

1.依赖于nodejs安装,安装nodejs和npm

下载地址,可以对照电脑系统版本进行下载安装:https://nodejs.org/en/download/
现在nodejs的安装包内置了npm,所以下载安装完成之后,nodejs和npm都会安装好

检查安装是否成功

Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)
安装成后会显示出对应的版本信息,由于我电脑之前就安装过了,所以应该不是最新的版本

2.安装hexo

安装命令:

sudo npm i -g hexo

直接一步就安装完成了,然后可以通过hexo -v查看是否安装成,成功安装的话,会打印出上面截图中的一些版本信息

Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)

3.hexo初始化博客项目

命令:

hexo init

Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)

初始化完成之后,看看hexo在文件夹给我生成了哪些文件

Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)

如果你是一名前端或者nodejs开发者,相信对这些文件再熟悉不过了,还是对上述几个文件简单解释一下:

  • node_modules:存放依赖包信息

  • public:存放生成的页面

  • scaffolds:存放生成文章的一些模板

  • source:存放用命令创建的各种文章

  • themes:存放博客使用的主题

  • _config.yml:存放整个博客的配置

  • db.json:存放source解析所得到的

  • package.json:存放项目所需模块项目的配置信息

4.将生成的博客项目跑起来

1、清除
hexo clean
2、生成
hexo g
3、启动服务
hexo server

Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)

启动完成后就可以按照提示,打开 http://localhost:4000 来访问我们在本地初始化好的博客项目了

Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)

可以看到我们的项目已经成功跑起来了,成功的迈出了第一步,先暂且按耐住激动的心情,我们继续!

5.在GitHub上创建仓库用于托管博客项目

打开Github:https://github.com/PeyShine,新建一个仓库,如图

Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)

仓库名称需要配置为:个人名字.github.io,仓库设置为公开,然后点击创建就可以

6.配置_config.yml

deploy:
type: git
repository: https://github.com/PeyShine/PeyShine.github.io.git
branch: master

  

7.上传项目

在此之前请先安装一个插件

npm install hexo-deployer-git --save

  

部署(上传到GitHub)

hexo d 或者 hexo deploy

Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)

上传过程中输入了用户名和密码,如果提前配置好ssh也可以不用输入

到Github上看一下,是否上传成功

Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)

可以看到文件都已经上传成功了

8.成功访问

通过域名“https://peyshine.github.io” 来访问

Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)

Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)的更多相关文章

  1. Hexo快速构建个人小站-自定义域名和自定义主题(二)

    背景交代: 在上一章<Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)>中,我们已经成功的利用hexo初始化了博客项目,并托管在Github上,且通过Github的 ...

  2. Hexo快速构建个人小站-Fulid主题下添加Valine评论系统&lpar;三&rpar;

    Hexo目录: Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一) Hexo快速构建个人小站-自定义域名和自定义主题(二) 背景交代: 前面两章完成了Hexo的初始化和部分自定义 ...

  3. vs2012快速将项目托管到github

    vs2012快速将项目托管到github   在VS2012中使用GitHub 注册GitHub账号(DeanZhouLin) https://github.com/ 向GitHub中添加一个仓库(T ...

  4. Hexo快速搭建博客

    1. 准备工作 ~ 安装node.js -> npm -> hexo-cli ~ 安装git -> 版本控制工具 2. 更换npm(nodejs package manager)源 ...

  5. &lbrack;外包&rsqb;&excl;采用asp&period;net core 快速构建小型创业公司后台管理系统&lpar;六&period;结语&rpar;

    到这里就结束了,真的结束了,源码会在文末分享! 另外录了两个视频,对这个系统进行了演示! 做有意义的事情,原此生无悔! 视频地址:使用asp.net core 快速构建权限管理模块1 使用asp.ne ...

  6. 使用coding和hexo快速搭建博客

    欢迎访问我的个人博客皮皮猪:http://www.zhsh666.xyz 今天教大家怎么用hexo快速搭建自己的博客.我不是专业人士,不懂前端知识,所以我十分讨厌那些专业术语,讲了一大堆,对于技术小白 ...

  7. 使用 Github 和 Hexo 快速搭建个人博客

    导语 个人兴趣爱好特别广泛,喜欢捣鼓各种小东西自娱自乐.虽然都没能深入研究,但是自己的“孩子”还是很想拿出来遛遛得人一句夸奖的.所以刚学 Markdown 的时候很是有想过要搭个个人博客来玩玩,一来激 ...

  8. 2019基于Hexo快速搭建个人博客,打造一个炫酷博客&lpar;1&rpar;-奥怪的小栈

    本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...

  9. 通过hexo&plus;NexT构建静态博客

    一般的教程网上有很多,主要讲下我遇到的问题以及解决方法: 一.hexo建立的文档无法上传github deploy: type: git repository: https://github.com/ ...

随机推荐

  1. Hyper-V架构与VMware ESXi的差异

    微软的Hyper-V与VMware的ESXi在架构上有众多不同,然而很多虚拟化管理员并未意识到这些差异.而且很多管理员同样对Hyper-V是在主机操作系统上运行感到困惑. 有关微软Hyper-V的一个 ...

  2. 【HTML】Iframe中的onload事件

    当iframe.src重新指定一个url时会重新执行iframe的onload事件 <iframe id="indexFrame" name="index&quot ...

  3. 数据结构———KMP

    今天照着课本敲了一下KMP.. 以OJ上的一个题为例敲了一下.. 题目:http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&amp ...

  4. Tcp抓包以及tcp状态解释

    tcp三次握手 发送端发送一个SYN=1,ACK=0标志的数据包给接收端,请求进行连接,这是第一次握手:接收端收到请求并且允许连接的话,就会发送一个SYN=1,ACK=1标志的数据包给发送端,告诉它, ...

  5. (转)&lbrack;OSX&rsqb; 在 OS X 中安装 MacPorts 指南

    原地址:http://www.cnblogs.com/ifantastic/p/3677066.html 什么是MacPorts? MacPorts是使用于Mac OS中第三方包管理工具. MacPo ...

  6. html 实现网址链接

    <a href="http://acm.nyist.net/JudgeOnline/problemset.php">南工oj</a> HTML学习 < ...

  7. Django-常用模板标签及过滤器

    常用模板标签及过滤器 标签和过滤器完整介绍 https://docs.djangoproject.com/en/1.11/ref/templates/builtins/ 模板的组成 HTML代码+ 逻 ...

  8. Servlet CDI example analysis

    上下文和依赖注入(CDI)使您的对象能够自动为它们提供依赖项,而不是创建它们或将它们作为参数接收.CDI还为您管理这些依赖项的生命周期. 例如,考虑以下servlet: @WebServlet(&qu ...

  9. day014 模块

    # 1.用于多种语言交互 编程语言通用数据 # 内置的 不需要安装 直接导入使用 import json # 导入一个json模块 # dumps loads# dump load 有持久化的功能 # ...

  10. angualr Material Icons

    首先需要项目引入 angualr meterial icons的资源库 图标资源链接 https://klarsys.github.io/angular-material-icons/ <md- ...