从零开始搭建个人博客

本片文章我们主要以hexo来搭建一个属于我们自己的个人博客

1.在搭建之前我们先了解一下什么是hexo呢?

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架!!!

我为什么会选择hexo来搭建博客呢?

对于小白来说它也是不二之选,对于处于第三方大平台上的我,比较不自由,我个人认为它的界面美观十分优雅,它的搭建成本也低,我们只需一台电脑就可以搭建。

参考链接:https://youtu.be/PsXWbI2Mqu0

接下我们直接搭建博客!!! 

2. 博客的搭建

nodejs,Git环境搭建

1.nvm下载参看文章:nvm详细安装步骤以及使用(window10系统)_nvm安装教程-CSDN博客

nvm是一个管理nodejs版本的工具。在实际的开发中,有些项目的开发依赖需要低版本的nodejs运行环境,此时我们就需要使用nvm来降低nodejs版本。 

 2.安装nodejs

在cmd命令框中使用以下命令进行安装

nvm install [version]            // 安装node, version是特定版本也可以是最新稳定版本latest
 nvm list available               // 显示已安装的列表。可选参数available,显示可安装的所有版本。list可简化为ls
nvm ls available                 // 显示已安装的列表。可选参数available,显示可安装的所有版本。list可简化为ls
nvm use <version>                // 切换到使用指定的nodejs版本

修改全局安装默认路径

如下(在cmd命令窗口执行):

cmd> npm config set prefix "C:\Users\Administrator\AppData\Roaming\nvm\node_global"
cmd> npm config set cache "C:\Users\Administrator\AppData\Roaming\nvm\node_cache"

 将npm镜像改为淘宝的镜像cnpm,可以提高下载速度

npm install -g cnpm --registry=https://registry.npmmirror.com

 

661b9ac03ba44ab8ae5b4a30dce3d786.png

安装hexo,完成简单的本地页面展示

1.全局安装 Hexo,进入cmd输入命令

npm install -g hexo-cli

2.创建一个文件夹Blog,在这个文件夹下直接右键git bash打开。

86215837135f402f8e25033d1f2d4a0c.png

3.接下来初始化一下hexo 

hexo init

生成以下目录:

【node_modules】:依赖包
【scaffolds】:生成文章的一些模板
【source】:用来存放你的文章
【themes】:主题
【.npmignore】:发布时忽略的文件(可忽略)
【_config.landscape.yml】:主题的配置文件
【config.yml】:博客的配置文件
【package.json】:项目名称、描述、版本、运行和开发等信息

遇到问题:不能使用hexo命令

解决分析:

不能使用hexo命令是因为我们本地电脑找不到hexo.cmd目录路径,这时hexo.cmd在我们自己安装node时设置的全局路径node_global下,只要将hexo.cmd所在目录配置到环境变量就好,具体配置环境变量方法由于简单不过于介绍自己上网搜索即可!!!

可参考链接:安装hexo时出现的问题:‘hexo‘ 不是内部或外部命令,也不是可运行的程序_hexo' 不是内部或外部命令,也不是可运行的程序 或批处理文件。-CSDN博客

 6b41baddba90482e89e40b5e6424dd4f.png

4.改配置

a636380fd8aa43e58c1cb5c6f03c8332.png 相关配置:

网站

参数

描述

title

网站标题

subtitle

网站副标题

description

网站描述

keywords

网站的关键词。支持多个关键词。

author

您的名字

language

网站使用的语言。对于简体中文用户来说,使用不同的主题可能需要设置成不同的值,请参考你的主题的文档自行设置,常见的有

zh-Hans

zh-CN

timezone

网站时区。Hexo 默认使用您电脑的时区。请参考

时区列表

进行设置,如

America/New_York

,

Japan

, 和

UTC

。一般的,对于中国大陆地区可以使用

Asia/Shanghai

各参数代表含义具体参考链接:配置 | Hexo

5.生成静态文件

hexo generate

 6.启动服务

hexo server

启动服务器。默认情况下,访问网址为: http://localhost:4000/

选项

描述

-p,--port

重设端口

-s,--static

只使用静态文件

-l,--log

启动日记记录,使用覆盖记录格式

2b992920e2964ca69215643aa823835c.png 进入以上命令则成功!!!

注册Git并创建仓库

1.在git注册一步一步跟着注册流程走

2.创建仓库格式要求:用户名.github.io

3.配置用户名和邮箱

在博客根目录下打开git bash输入以下命令

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

a6a30215d6ce4cff82d30d1c8a029c76.png

4.在博客根目录打开git bash执行以下命令

git config -l

连接至github

1.执行以下命令生成ssh公钥,此公钥用于你的计算机连接Github

ssh-keygen -t rsa -C "你的邮箱"

之后打开C盘下用户文件夹下的.ssh的文件夹,会看到 id_rsa.pub

7dfd2f82c2f74409b3f7d86a73e3e84a.png

用记事本打开上述图片中的公钥(id_rsa.pub),复制里面的内容,然后开始在github中配置ssh密钥。

2.将 SSH KEY 配置到 GitHub

进入github,点击右上角头像 选择settings,进入设置页后选择 SSH and GPG keys,名字随便起,公钥填到Key那一栏。

 9e4a6cc3c9784340a7a51865b2682840.png

3.测试连接,输入以下命令

ssh -T git@github.com

 出现连接到账户的信息,说明已经大功告成,至此完成了环境准备工作!!!

将静态博客挂载到 GitHub Pages

1.安装 hexo-deployer-git

npm install hexo-deployer-git --save

2.修改 _config.yml 文件

在blog-demo目录下的_config.yml,就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述
修改最后一行的配置,将repository修改为你自己的github项目地址即可,还有分支要改为main代表主分支(注意缩进)。

deploy:
  type: git
  repository: git@github.com:Fomalhaut-Blog/Fomalhaut-Blog.github.io.git
  branch: main

3.修改好配置后,运行如下命令,将代码部署到 GitHub(Hexo三连) 

hexo clean    //删除之前生成的文件,若未生成过静态文件,可忽略此命令。

hexo generate    //生成静态文章,可以用hexo g缩写

hexo deploy    //部署文章,可以用hexo d缩写

查看自己的仓库显示:

ac336725b5124d1287d9494c6f0d2c9a.png

这就表示成功了!!!

稍等两分钟,打开浏览器访问:https:你的仓库名.gitgub.io ,这时候我们就可以看到博客内容了。

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TC_FANCY

你的支持是我最大的鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值