173 lines
4.7 KiB
Markdown
173 lines
4.7 KiB
Markdown
---
|
||
|
||
title: 光速搭建个人博客网站！
|
||
author: Vvvvv-
|
||
tags: []
|
||
categories:
|
||
|
||
- 技术分享
|
||
date: 2023-01-22 15:02:00
|
||
---
|
||
|
||
---
|
||
# 授课笔记
|
||
|
||
## 怎么样制作一个公开的网站
|
||
|
||
### 工具
|
||
|
||
- 网站的源代码
|
||
- IP地址/域名
|
||
- 维护方式
|
||
- 现成的框架与开源的社区
|
||
- Wordpress
|
||
- Typecho
|
||
- Hexo
|
||
- Docsify
|
||
|
||
### 最简单公开：生成一个二维码（理工男的浪漫）
|
||
|
||
- [草料二维码](https://cli.im/) 科技的终点是人文。
|
||
- 妈妈我爱你
|
||
|
||
### 公开平台
|
||
|
||
- 短文字（微博、知乎）
|
||
- 短视频（抖音、快手)
|
||
- 长视频（B站 yyds）
|
||
- 长文（知乎、简书）
|
||
- 生活资讯（小红书）
|
||
- 最大的个人IP平台（微信公众号）
|
||
|
||
### 个人公众号的制作
|
||
|
||
### 网站制作
|
||
|
||
1. 部署网站框架（Github、Gitee 码云）
|
||
2. 托管后，与域名链接
|
||
3. 域名访问
|
||
|
||
---
|
||
|
||
# 网站部署工具I - 利用Docsify展示MD文件
|
||
|
||
## 准备工作
|
||
|
||
- 包管理器 Node.js（npm） nodejs package manager
|
||
- 开源框架 Docsify
|
||
- 内容 Markdown （Typora）
|
||
|
||
## 开始安装
|
||
|
||
### 安装包管理器 npm
|
||
|
||
[Node.JS 官网](nodejs.cn) 根据平台下载 LTS 版本。
|
||
|
||
验证是否安装成功：Windows 系统下打开命令行，快捷键`Win+R`，输入 cmd 回车`(即Command)`
|
||
输入 `npm --version` ，如有结果则正确
|
||
|
||
### 安装 Docsify
|
||
|
||
1. `npm i docsify-cli -g` 安装 Docsify 包 （i = install）
|
||
2. 找一个顺眼的文件夹存储目录，在 cmd 中打开（见下方技巧）
|
||
3. [初始化项目](https://docsify.js.org/#/zh-cn/quickstart?id=初始化项目) `docsify init` init (initialize) 初始化， 输入Y
|
||
4. 预览网页 `docsify serve` serve 即服务
|
||
|
||
### 制作网页
|
||
|
||
更改初始化完的目录中的`README.md`文件即可，可用 Typora 打开。
|
||
|
||
### 部署方式
|
||
|
||
1. 打开Gitee.com，进行注册
|
||
2. 新建一个仓库，仓库名与个人空间地址相同。选择设置模板——readme文件。
|
||
3. 点击服务——Gitee Pages，进行实名认证。
|
||
4. 点回代码页，点击文件——新建文件夹。
|
||
5. 在新建文件夹中上传 Docsify 文件。
|
||
6. 再次打开Gitee Pages，分支不变，目录填新建的文件夹。点击启动即可。
|
||
7. 更改 README.md 即可更改内容，更新即可。
|
||
|
||
---
|
||
|
||
### Markdown 语法
|
||
|
||
- `### ` 标题
|
||
- `*内容*`斜体 `**内容**` 粗体
|
||
- `代码``` ` 行内
|
||
- 列表
|
||
- 无序列表
|
||
- *-+
|
||
- 有序列表
|
||
- 1.
|
||
|
||
- 分割线 `---`
|
||
|
||
## cmd 技巧
|
||
|
||
1. 工作目录 输入盘符 : 切换磁盘
|
||
2. `cd` (change directory) + 要切换的目录
|
||
3. `cd..` .. 表示上一级目录 . 表示当前目录
|
||
4. `dir`显示当前目录的文件
|
||
|
||
---
|
||
|
||
# 网站部署工具 II - 利用Hexo制作静态博客
|
||
|
||
## 准备工作
|
||
|
||
- 了解开源：热爱共享 和 开放自由（黑客->极客）
|
||
- 史蒂夫·乔布斯、沃兹尼克 APPLE Ｉ红皮书的故事
|
||
- 最出名的开源社区：Github.com / OpenResty / OpenSSL
|
||
- 国内开源社区：Gitee.com 码云 / Coding.net / OSCHINA
|
||
- 安装 NPM 管理器 https://nodejs.cn 一路下一步，不要更改任何东西
|
||
- 验证是否装好：`npm --version`
|
||
|
||
## 使用Hexo
|
||
|
||
### 初始化步骤（只需运行一次）
|
||
|
||
1. 安装 Hexo 管理器，直接在cmd中运行`npm install -g hexo-cli ` 验证是否装好： `hexo`
|
||
|
||
2. 安装 Git：https://registry.npmmirror.com/binary.html?path=git-for-windows/v2.35.1.windows.2/
|
||
|
||
下载 Git-2.35.1.2-64-bit.exe，一路下一步啥都别管
|
||
|
||
3. 找一个顺眼的文件夹，右键在此处打开Git Bash Here，输入`hexo init`运行
|
||
4. 运行 `npm install` , 初始化完成
|
||
|
||
### 配置网站
|
||
|
||
1. 预览效果 `hexo s`
|
||
|
||
2. 写内容，新建一个网页 `hexo new 网页名字`
|
||
|
||
3. 找到 md 文件，`/source/_posts/`目录里找到新建的文件，改动后保存即可，刷新即看效果
|
||
|
||
### 更换主题
|
||
|
||
1. 打开官网：https://hexo.io/zh-cn/docs，点击上方的 Themes，可以找到许多主题，选择一个
|
||
2. 跟随文档说明进行安装，通常是打开本地的hexo目录，进行 Git Clone 操作.
|
||
|
||
## 部署网站
|
||
|
||
1. 安装 [hexo-deployer-git](https://github.com/hexojs/hexo-deployer-git). 命令为`npm install --save hexo-deployer-git`
|
||
2. 在 **_config.yml**（如果有已存在的请删除）添加如下配置：
|
||
|
||
repo 网址在个人仓库中 - 克隆/下载 - 复制，注意空格
|
||
|
||
`
|
||
deploy:
|
||
type: git
|
||
repo: https://gitee.com/fallcityv/fallcityv.git
|
||
branch: master
|
||
`
|
||
|
||
3. 运行 `hexo clean && hexo deploy |代替：（hexo d）` 。如出现`deploy done`则表示成功
|
||
|
||
注意：用户名填邮箱或手机号，输密码不会显示，输完回车即可。
|
||
|
||
4. 打开 Gitee Pages 服务，部署目录空，直接更新或启动。
|
||
|
||
## 作业
|
||
|
||
注册`gitee.com` ， 完成实名认证，将网站部署到公网 |