从无到有搭建一个博客
小白教程
- 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
文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown
和HTML
文件会被解析并放到public
文件夹,而其他文件会被拷贝过去。
_config.yml
:网站的配置信息,您可以在此配置大部分的参数(YAML是一种新型的配置文件语言,是一种比JSON还简洁和强大的格式,而yml则是这种配置文件的后缀)。
package.json
:应用程序的信息。EJS, Stylus
和Markdown 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
一起使用的,Github
和Coding
都是在线代码仓库(二者的区别在于前者是国际的,后者是国内的)可以远程寄存你的代码或文件,他们都各自提供了一种叫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
进行保存,这时候就可以成功访问了,如果还是不彳亍,先等待一会,因为刷新的比较慢。
从无到有搭建一个博客相关推荐
- 运用BT在centos下搭建一个博客论坛
在日常的工作和学习中,我们都很希望有自己的工作站,就是自己的服务器,自己给自己搭建一个博客或者是论坛,用于自己来写博客和搭建网站论坛.现在我们就用一个简单的方法来教大家如何30分钟内部署一个博客网站. ...
- github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
- 注册最便宜的xyz域名,低成本搭建一个博客
看到群里有人发考虑买xyz域名,于是就分享一下自己的xyz域名是如何购买的. .xyz,Internet网址域名后缀,全球通用的新顶级域名,简单来说就是网址中最右边一个"点"后面的 ...
- 利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
- 如何利用 GitHub 从零开始搭建一个博客
趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域名是 nightteam.cn,所以这里官方博客使用了二级域名 blo ...
- 如何用 GitHub 从零开始搭建一个博客?
公众号关注 "GitHubDaily" 设为 "星标",带你玩转 GitHub! 作为目前全球最大的程序员社区,GitHub 能做的可不仅仅是托管源码这一操作, ...
- 【FastAPI 03】FastAPI快速搭建一个博客系统
标题:FastAPI快速搭建一个博客系统 大家好,我是Kuls. 这是<小白学FastAPI>系列的第三篇文章. 今天我们主要讲的是FastAPI快速搭建一个博客系统. 这里可能有些小伙伴 ...
- 微信小程序|搭建一个博客小程序
文章目录 一.文章前言 二.创建小程序 三.功能开发 (1)首页 (2)领域页 (3)博客详情页 (4)个人中心页 一.文章前言 此文主要通过小程序搭建一个博客系统,实现博客的一些基础功能,也可以当做 ...
- 10分钟利用django搭建一个博客
以前老是听说ROR开发有多快多块,网上还有朋友为了证明这,专门制作了10分钟利用rails框架搭建一个简易博客的教程,最近学习django框架,觉得django给开发者的便捷也很多,心血来潮来写个10 ...
最新文章
- 对面向对象基本原则的总结
- 文本分类入门(十一)特征选择方法之信息增益
- Scala中的二维数组乘法
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用...
- 天池 在线编程 音乐组合
- python3 rid1.7.4.2 控制台中文乱码_TL;DR - 有关 Python 2 和 Sublime Text 中文 Unicode 编码问题的分析与理解...
- Shell编程:简洁的 Bash Programming 技巧
- kafka 集群_kafka 集群及原理
- beanfactory的实现类_ApplicationContext和BeanFactory的区别
- NUCLEUS:13:西门子实时操作系统 Nucleus漏洞影响物联网设备等
- datagridview输入数据格式化_第五节,输入输出函数
- 自动控制原理(第七版)胡寿松 课本
- Macbook Pro 安装 win10 单操作系统
- Layui选项卡Tab和Layui模板laytpl冲突问题
- C#递归算法使用案例——画树
- 前端处理简单的XSS(跨站脚本攻击)防护
- 坐在办公室里的人注意一下-喝水--鼠标手---脖子(颈椎)---腰部
- 一文说清MySQL索引数据结构
- 单页应用首屏加载速度慢怎么解决?
- 快手治理低质量直播内容,运营者需要注意什么?
热门文章
- PING测试 (用DOS进行网络故障的排除方法)
- MiniTool 数据恢复帮我找回手机照片
- Unsupported texture format - Texture2D::EncodeTo functions do not support compressed texture formats
- 带你入门GeoSpark系列之三【空间查询篇】
- 合宙Air105|摄像头|capture|SPI|Serial 串口|TFTLCD|Micro SD卡|GC032A|USB转TTL|官方demo|学习(2-1):摄像头camera-capture
- w ndows10装什么浏览器,Windows10系统重装不了IE11浏览器如何解决
- 华为ne40e出现php什么意思,NE80E、NE40E、NE5000E的POS卡端口信息告警的含义及定位方法...
- GUI、模块化与结对编程(homework-03)
- 收藏:近期已上线或即将上线的热门手游盘点,射击魔幻角色扮演?总有一款适合你
- 房总管管家显示服务器错误,房总管管家