零基础hexo+GitHub搭建个人博客

零基础运用hexo框架搭建个人博客

一.前提准备(以下所有演示均已widows系统为例,mac用户可观看文末视频链接配合文档进行搭建)

1.Git下载安装与环境配置

●网上教程众多,此处就不累述。给出其中一个参考链接Git下载、安装与环境配置

2.Node.js下载安装与配置

Node.js下载链接下载左边LTS长期支持版。安装完成后打开cmd(同时按住Win+R,输入cmd,打开命令提示符程序),输入node -v和npm -v**(此处注意-v前面有空格,后面所有命令一样,均需注意空格,不输入空格则会造成错误)**查看是否安装成功,成功则会类似下图所示。

●下载npm的镜像源cnpm:在cmd中输入npm install -g cnpm --registry=https://registry.npm/taobao.org进行下载。 下载完成后,在cmd中输入cnpm和cnpm -v查看是否安装成功。

3.Markdown编辑器下载

●编写个人博客文章需要使用Markdown语言,去网上任意搜索下载一个主流Markdown编辑器即可,个人推荐使用Typora下载链接

二:个人博客搭建

1.hexo下载使用

●在cmd中输入cnpm install -g hexo-cli,下载完成后输入hexo -v查看是否安装成功。
●新建一个文件夹blog,在该文件夹中,右键点击Git Bush Here(后续称为黑框)(或者在任意地方打开黑框然后输入cd 文件夹的位置(eg:cd E:\myblog)),然后输入hexo init,等待安装完成后可输入ls -l查看是否安装成功。
●再输入hexo s,会出现网址(记住),将网址输入浏览器中即可查看已创建的本地博客网页(有时可能出现网址无法访问的现象,是由于hexo默认的端口4000被占用了,在黑框中输入hexo s -p 5000即可访问。如若还是无法访问也影响不大,对后续将网页部署到远端后进行访问没有影响)。

2.将个人博客网页部署到远端Github/Gitee(以下演示以Github为例,Gitee操作类似)

●登录Github网页,新建一个仓库(即点击右上角的加号后,再点击New repository),在Repository name中需填写格式’自己的GitHub名字.github.io’,必须按该格式填写,其余地方随意。
●在文件夹blog中打开黑框后输入cnpm install --save hexo-deployer-git
●打开文件夹blog中的_config.yml,找到如下图处并按图进行修改,马赛克处填入自己的Github账号(注意每个冒号后都要加空格)。


●再在黑框中输入hexo d,可能会出现如下图所示,即在上面输入自己Github账号下面输入密码,之后即成功,再刷新打开网页中的仓库即可看到成功,此时个人博客网址即使:https://自己Github用户名.github.io,至此个人博客即是搭建成功。

3.在个人博客中发表文章

●在黑框中输入hexo n “文章标题”,即生成一篇文章在类似文件夹E:\myblog\source_posts中,打开其在Markdown编辑其中即可进行编写。(Markdown的语法很简单,自行上网查找学习)

●编写完成保存后,在黑框中分别依次输入hexo clean、hexo g、hexo s,运行完成后打开本地博客网页查看博客修改是否无问题,确认后再在黑框输入hexo d,这样即是成功在个人博客中发表一篇文章。

三.博客主题的切换以及样式修改

1.主题的修改(以下演示以yilia为例)

●在黑框中输入git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia后,查看yilia文件夹是否在landscape文件夹所在的themes文件夹中,若不在将yilia文件夹挪到和landscape文件夹一起。

●打开文件夹blog中的_config.yml,找到如下图处修改为图中所示。再在黑框中依次输入hexo clean、hexo s、hexo g、hexo d,即是主题修改成功。

2.样式的修改

●打开yilia文件夹中的_config.yml,根据其中的提示即可进行部分样式的修改。

●如果要对更多的样式进行修改,功能进行添加,可自行上网搜索或者学习html、css和JavaScript。

mac教程视频链接

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值