阅读 1040

Hexo 搭建教程 爬坑日记-2:博客搭建

这是我参与更文挑战的第2天,活动详情查看: 更文挑战

前言

先给大家道个歉我看到有一位小伙伴在评论区地下评论两天了。翻一下他的表达,就是我的文章没有下文了。我先道个歉,对不起你对我的关注。具体的理由就是:没有任何理由。好了,今天是6.1儿童节 祝你节日快乐哈!!!祝大家节日快乐哈!!!要吃榴莲,让6.1流连忘返 开整!!!

目标 (写完或者读完这篇文章 你可以得到什么)

  • 可用 你的github账户名称.github.io 访问到自己的博客 like this

image.png

物料准备:

博客项目构建思路

graph TD
 xxx.github.io可访问 --> 本地搭建Hexo项目--> 本地项目部署至github仓库

开始搭建

1. xxx.github.io可访问

1. 登录github后找到并记住你的 github 账户名称 xxx

image.png

2. 新建仓库 Create repository

github 右上角的+号选择 New repository

image.png 找到的 github 账户名称 键入仓库名称 github账户名.github.io 以我为例 hiciciya.github.io image.png 仓库新建成功 image.png

3. 测试 githubpage 是否可访问

image.png 恩 失败了,不可以访问。原因:我们只是建立了一个空仓库 啥都没有是理所应当的哈 不要惊恐更不要感觉惊悚

4. Clone仓库到本地

github配置sshkey 默认你们是会的哈 这就是一个把电脑和github链接起来的钥匙 如果不会 也没关系点这里可以学习哈

复制仓库地址 image.png

在本地新找一块位置 比如说桌面 打开命令行工具(gitbash powshell cmder )

git clone 你的仓库地址

clone 仓库到本地 image.png

用IDE(webstorm Vscode sublime )打开

5. 新建 一个html文件 index.html 并推送远端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    My Blog
</body>
</html>
复制代码

本地提交

git add .

git commit -m "text githubpages"

推送至远端

git push origin master

image.png

6. 再次测试 githubpage 是否可访问

浏览器输入 xxx.github.io/

image.png 到这里其实就是一个基本最简单的博客了。你可以像开发项目一样去开发一个属于自己的博客。自己博客系统就变成纯编程式了,维护起来效率低, 难度大。 这样的事情我们可以交给 Blog框架来做 比如我们在开篇提到的Hexo。

2. 本地搭建Hexo项目

Hexo 是什么

一个博客框架 项目语法 Markdown(当然你也可以配置其他)

安装 Hexo

1. 环境准备

基础环境配置完善 (详见基础物料) 可以输入一下命令进行环境 check 是否安装成功

git --version

node -v

npm -v

2. 安装
``` npm install -g hexo-cli ```
复制代码
3. 初始化博客项目

执行一下命令

hexo init xxx.github.io

cd xxx.github.io

项目结构如下:
```
hiciciya.github.io
├── db.json
├── node_modules  // 依赖 
├── package.json // 应用程序信息
├── scaffolds  //模板文件夹 
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source // 资源文件夹 
│   └── _posts
├── themes //主题 博客风格
├── _config.landscape.yml
└── _config.yml //网站配置信息
```
复制代码
4. 本地运行项目:

npm run server

or

hexo -s

image.png 项目本地就运行起来了 it'S WORK。

我们看到首页默认有一篇HelloWord文章 我们思考如何去控制这篇文章 在已生成目录中去找 与Helloword内容相匹配的文件 发现/source/_posts/HelloWord 与我们看到的文章内容匹配

├── source
│   └── _posts
复制代码

image.png

5. 尝试 修改初始化的文章内容
---
title: 我的第一篇文章
---
复制代码

页面中文章名称跟着变化 生效了

image.png 得出的结论是 /source/_posts下的md控制文章视图

6. 新建文章

执行hexo new MyWord

顺着我们刚才的逻辑 /source/_posts 应该增加一个 名为MyWord.md的文件

image.png 这样一篇文章就新建成功了 编辑文章内容: 在MyWord.md 可以随便来点内容

---
title: MyWord
date: 2021-06-03 13:49:16
tags: 
---
### 我的世界很简单 简单到我每顿只吃大龙虾
复制代码

页面同步更新哈 image.png

恭喜第一篇博文发表成功 但是此刻仅是在本地哈

3. 部署 Githubpages

部署思路

graph TD
本地代码变化 --> 同步到远端仓库--> 客户端同步更新

能自动化实现该流程是理想状态 持续集成(CI)工具是最优解 Hexo 官方推荐 Travis

image.png

开始部署

1. Travis与github关联
点击 [https://www.travis-ci.com/](https://www.travis-ci.com/)进入Travis官网 右上角点击 `Sign in`按钮
复制代码

image.png 进入 登录界面 点击 SIGN IN WITH GITHUB 按钮

image.png

image.png 登录成功

2. Github 配置 Travis CI 权限

点击当前页按钮Activate all repositories using GitHub Apps

image.png

进入授权页面 点击 APProve Install

image.png

初次关联的话 会重定向一些页面 如果有需要就选择绿色按钮 绿色代表同意 完成授权

3. 新建 Personal Access Token

点击github.com/settings/to… 点击 Generate new token

image.png 键入Token名称 在Note项填入 GH_TOKEN 并只勾选 repo 的权限 image.png 左下角Generate token Token生成成功 复制新生成的Token如下图所示

image.png

4. Travis CI 配置 Environment Variables 对应的项目仓库配置环境变量

回到 Travis CI主页 右侧选择选项目仓库 点击右上角 More options 下拉选择Settings

滚动 至 Environment Variables

新建环境变量 NameGH_Token VALUE为我们在 GitHub 生成的 Token

ps:保证 DISPLAY VALUE IN BUILD LOG 不被勾选 避免你的 Token 泄漏。

image.png

image.png

image.png

项目配置CI

1. 新建一个 .travis.yml
复制以下内容至 .travis.yml 文件
复制代码
sudo: false
language: node_js
node_js:
  - 12 # use nodejs v12 LTS
cache: npm
branches:
  only:
    - master # build master branch only
script:
  - hexo generate # generate static files
deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GH_TOKEN
  keep-history: true
  on:
    branch: master
  local-dir: public
复制代码
2. 提交本地代码至远端

git add .

git commit -m "add travis config"

git push origin master

Travis CI 应该会自动开始运行,并将生成的文件推送到同一 repository 下的 gh-pages 分支下

回到Travis CI 官网 如下图所示 完成部署

image.png

3. 修改 GithubPages 部署分支

回到Github对应项目主页 点击 Settings image.png 右侧侧边栏 选择 Pages Source 下 选择分支为 gh-pages (默认部署 为master分支) 点击Save

4. 浏览器 访问 xxxx.github.io

image.png

没有成功??? 我也一直是这样认为的,各种百度,吸取百家之长 此时只是需要等10分钟或者20分钟

稳住!!!

image.png

done!!!
文章分类
前端
文章标签