小白教程

  • 1.Git安装
  • 2.Node.js安装
  • 3.Hexo安装
    • 1.建立一个空白文件夹
    • 2.安装 Hexo 博客程序
      • 常用命令
    • 3.Hexo初始化
    • 4.本地预览
  • 4.连接Github
    • 1.设置用户名和邮箱
    • 2.创建SSH密匙
    • 3.添加密匙
    • 4.验证连接
  • 5.博客部署
    • 1.创建Github Pages仓库
    • 2.安装部署命令
    • 3.修改文件

1.Git安装

访问地址https://git-scm.com/


2.Node.js安装

访问地址https://nodejs.org/en/

3.Hexo安装

Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

1.建立一个空白文件夹

新建一个文件夹用来存放Hexo的程序文件,如Hexo。打开该文件夹,右键 -> Git Bash Here。

2.安装 Hexo 博客程序

常用命令

hexo init [folder]         # 初始化
hexo install               # 安装所需要的组件
hexo -v                    # 显示 Hexo 版本等信息hexo g                     # generate,生成静态文件
hexo s                     # server,启动服务器
hexo d                     # deploy,部署网站
hexo g -d                  # 自动完成 generate + deploy 操作
hexo clean                 # 清除缓存文件和已生成的静态文件hexo s -p <port>           # 更改部署端口,默认为 4000
hexo s -i 192.168.1.1      # 更改部署 ip,默认为 `0.0.0.0`
hexo list <type>           # 查看如下信息:page, post, route, tag, category
npm list                   # 查看当前模块本地依赖列表hexo g --watch             # 监视文件变动并立即重新生成静态文件
hexo new [layout] xxx      # 新建一篇文章
hexo publish [layout] xxx  # 发表草稿
hexo render xxx            # 渲染文件。`-o`设置输出路径
hexo migrate <type>        # 从其他博客系统迁移内容hexo --safe                # 安全模式,不会载入插件和脚本
hexo --debug               # 调试模式。在终端中显示调试信息并记录到`debug.log`
hexo --silent              # 简洁模式。隐藏终端信息
hexo --config custom.yml   # 自定义配置文件的路径
hexo --draft               # 显示`source/_drafts`文件夹中的草稿文章
hexo --cwd /path/to/cwd    # 自定义当前工作目录的路径
npm install -g hexo-cli

解释:npm的意思是使用nmp执行命令,install的意思是通过npm进行安装模块行为,-g意思是global,即全局安装。hexo-cli是已知需要安装的模块名称。全句意思是通过刚才安装的node.js里自带的包管理器npm安装了一个叫做hexo-cli的包(在npm里管这叫模块module

3.Hexo初始化

安装完成后,执行下列命令,Hexo将会在指定文件夹中新建所需要的文件

hexo init <folder>#folder为新建文件夹的名字
cd <folder>#cd为change directory,即切换目录
npm install

新建完成后,指定文件夹的目录如下:

├── .deploy_git    # 在 _config.yml 中配置的 git 仓库,内容来自 public 目录
├── node_modules   # 依赖的模块,有些模块必须使用本地依赖,比如 hexo-deployer-git
├── public         # 存放自动生成的静态文件,这个目录的内容会拷贝到 .deploy_git 中
|   ├── images/css/js/lib  # 项目用到的静态资源,source 目录下的静态资源也会拷贝过来
|   ├── categories/tags    # 分类、标签文件
|   ├── archives/...       # 生成的博客文件
├── scaffolds      # 模板,通过 hexo new 新建文章时可使用默认模板 post、page、draft,也可自定义
├── source         # 源文件
|   ├── _posts     # 用来发布的文件,需确保文件头至少包含 title 的 Front-matter,否则可能出错
|   ├── _drafts    # 临时的草稿文件
├── themes         # 主题目录,每个主题放到一个单独的子目录汇总
|
├── _config.yml    # 【重要】网站的配置文件,配置博客的基础信息、模板、主题、部署等
├── package.json   # 项目的配置文件,这是 npm 项目通用的配置文件,例如项目名、版本、依赖


node_modules:依赖包
public:存放生成的页面
scaffolds:模版文件夹,当您新建文章时,Hexo会根据scaffold来建立文件。
Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。
source:资源文件夹,是存放用户资源的地方。除_posts文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。MarkdownHTML文件会被解析并放到public文件夹,而其他文件会被拷贝过去。
_config.yml:网站的配置信息,您可以在此配置大部分的参数(YAML是一种新型的配置文件语言,是一种比JSON还简洁和强大的格式,而yml则是这种配置文件的后缀)。
package.json:应用程序的信息。EJS, StylusMarkdown renderer已默认安装,您可以自由移除。
themes:主题文件夹,Hexo会根据主题来生成静态页面。

4.本地预览

执行下列命令,即可在本地预览

hexo generate//生成界面
hexo server//本地预览

出现下述界面后

访问http://localhost:4000/即可看到自己博客。

4.连接Github

使用邮箱注册 GitHub 账户,选择免费账户(Free),并完成邮件验证。

1.设置用户名和邮箱

右键 -> Git Bash Here,输入下列

git config --global user.name "GitHub用户名" #Github用户名替换为自己的Github账户
git config --global user.email "GitHub邮箱" #Github邮箱替换为自己注册时使用的邮箱

2.创建SSH密匙

SSH,简单来讲,就是一个秘钥,其中,id_rsa是你这台电脑的私人秘钥,不能给别人看的,id_rsa.pub是公共秘钥,可以随便给别人看。把这个公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。

ssh-keygen -t rsa -C "GitHub邮箱" #Github邮箱替换为自己注册时使用的邮箱

然后一路回车。密匙生成位置在C:\Users\用户名.ssh目录下(要勾选显示“隐藏的项目”选项)。

3.添加密匙

登陆Github ,进入Settings页面,选择左边栏的SSH and GPG keys,点击New SSH key,添加密匙:

Title可以随便填,Key的内容为id_rsa.pub里面的内容,用记事本打开复制下来粘贴即可。

4.验证连接

右键 -> Git Bash Here ,输入ssh -T git@github.com

5.博客部署

那么博文已经有了,怎么把它放到网上让所有人都能访问呢,这时候你需要把它部署到服务器,并提供访问地址,理论上来讲,你可能需要租服务器,并把博客丢上去,然后还要配域名,因为你总不可能让别人通过IP地址访问你的博客。但是这样一来就太麻烦了,作为新手的我们肯定不会愿意的,好在一般Hexo的使用都是联合Github Pages或者Coding Pages一起使用的,GithubCoding都是在线代码仓库(二者的区别在于前者是国际的,后者是国内的)可以远程寄存你的代码或文件,他们都各自提供了一种叫Pages的服务,可以使得你的用户名同名仓库可以作为域名对外公布访问,这样你相当于拥有了一个免费个人网站,并且还不需要注册域名和备案。
有了这个技术,我们就可以通过git把本地生成的博客静态文件(public目录里的)上传到这个仓库里,然后别人就可以通过访问这个仓库的方式来访问你的博客。

1.创建Github Pages仓库

点击GitHub主页右上角 +,然后点击New repository:
Repository name中输入用户名.github.io
Description为选填项
Add a README file勾选上
填好后点击Create repository创建

2.安装部署命令

先安装deploy-git ,也就是部署的命令,这样才能用命令部署到GitHub

npm install hexo-deployer-git --save

3.修改文件

修改_config.yml文件末尾的Deployment部分,修改成如下:

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:type: gitrepository: git@github.com:用户名/用户名.github.io.git#用户名填自己的用户名即可branch: master

然后执行下列命令,即可在自己的用户名中访问

hexo clean
hexo generate
hexo deploy

若还是无法显示,可能是因为没有切换Github Pages中的默认分支,因为Github Pages的默认分支是main,而我们使用的是master,因此需要调试。
首先打开自己的存储库,点击Settings

然后点击GitHub Pages

选择Branch为master,然后记得点击Save进行保存,这时候就可以成功访问了,如果还是不彳亍,先等待一会,因为刷新的比较慢。

从无到有搭建一个博客相关推荐

  1. 运用BT在centos下搭建一个博客论坛

    在日常的工作和学习中,我们都很希望有自己的工作站,就是自己的服务器,自己给自己搭建一个博客或者是论坛,用于自己来写博客和搭建网站论坛.现在我们就用一个简单的方法来教大家如何30分钟内部署一个博客网站. ...

  2. github项目怎么运行_利用 GitHub 从零开始搭建一个博客

    "NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...

  3. 注册最便宜的xyz域名,低成本搭建一个博客

    看到群里有人发考虑买xyz域名,于是就分享一下自己的xyz域名是如何购买的. .xyz,Internet网址域名后缀,全球通用的新顶级域名,简单来说就是网址中最右边一个"点"后面的 ...

  4. 利用 GitHub 从零开始搭建一个博客

    "NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...

  5. 如何利用 GitHub 从零开始搭建一个博客

    趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域名是 nightteam.cn,所以这里官方博客使用了二级域名 blo ...

  6. 如何用 GitHub 从零开始搭建一个博客?

    公众号关注 "GitHubDaily" 设为 "星标",带你玩转 GitHub! 作为目前全球最大的程序员社区,GitHub 能做的可不仅仅是托管源码这一操作, ...

  7. 【FastAPI 03】FastAPI快速搭建一个博客系统

    标题:FastAPI快速搭建一个博客系统 大家好,我是Kuls. 这是<小白学FastAPI>系列的第三篇文章. 今天我们主要讲的是FastAPI快速搭建一个博客系统. 这里可能有些小伙伴 ...

  8. 微信小程序|搭建一个博客小程序

    文章目录 一.文章前言 二.创建小程序 三.功能开发 (1)首页 (2)领域页 (3)博客详情页 (4)个人中心页 一.文章前言 此文主要通过小程序搭建一个博客系统,实现博客的一些基础功能,也可以当做 ...

  9. 10分钟利用django搭建一个博客

    以前老是听说ROR开发有多快多块,网上还有朋友为了证明这,专门制作了10分钟利用rails框架搭建一个简易博客的教程,最近学习django框架,觉得django给开发者的便捷也很多,心血来潮来写个10 ...

最新文章

  1. 对面向对象基本原则的总结
  2. 文本分类入门(十一)特征选择方法之信息增益
  3. Scala中的二维数组乘法
  4. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用...
  5. 天池 在线编程 音乐组合
  6. python3 rid1.7.4.2 控制台中文乱码_TL;DR - 有关 Python 2 和 Sublime Text 中文 Unicode 编码问题的分析与理解...
  7. Shell编程:简洁的 Bash Programming 技巧
  8. kafka 集群_kafka 集群及原理
  9. beanfactory的实现类_ApplicationContext和BeanFactory的区别
  10. NUCLEUS:13:西门子实时操作系统 Nucleus漏洞影响物联网设备等
  11. datagridview输入数据格式化_第五节,输入输出函数
  12. 自动控制原理(第七版)胡寿松 课本
  13. Macbook Pro 安装 win10 单操作系统
  14. Layui选项卡Tab和Layui模板laytpl冲突问题
  15. C#递归算法使用案例——画树
  16. 前端处理简单的XSS(跨站脚本攻击)防护
  17. 坐在办公室里的人注意一下-喝水--鼠标手---脖子(颈椎)---腰部
  18. 一文说清MySQL索引数据结构
  19. 单页应用首屏加载速度慢怎么解决?
  20. 快手治理低质量直播内容,运营者需要注意什么?

热门文章

  1. PING测试 (用DOS进行网络故障的排除方法)
  2. MiniTool 数据恢复帮我找回手机照片
  3. Unsupported texture format - Texture2D::EncodeTo functions do not support compressed texture formats
  4. 带你入门GeoSpark系列之三【空间查询篇】
  5. 合宙Air105|摄像头|capture|SPI|Serial 串口|TFTLCD|Micro SD卡|GC032A|USB转TTL|官方demo|学习(2-1):摄像头camera-capture
  6. w ndows10装什么浏览器,Windows10系统重装不了IE11浏览器如何解决
  7. 华为ne40e出现php什么意思,NE80E、NE40E、NE5000E的POS卡端口信息告警的含义及定位方法...
  8. GUI、模块化与结对编程(homework-03)
  9. 收藏:近期已上线或即将上线的热门手游盘点,射击魔幻角色扮演?总有一款适合你
  10. 房总管管家显示服务器错误,房总管管家