ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Github + Hexo 搭建个人博客超详细教程

2022-08-21 14:02:39  阅读:164  来源: 互联网

标签:npm 教程 Github Hexo hexo Git git


本文目录 generated with DocToc

1.安装node.js

了解一下什么是Node.js:

Node.js就是一个用于创建服务器端应用程序的运行系统,它可以轻松构建网络或其他事件驱动的应用程序服务器。

node.js下载地址

需要用到的命令:

git --version
node -v
npm -v

检验是否安装成功:按Win+R打开命令提示符,输入node -v和npm -v,如果出现版本号,那么就安装成功了。

2.添加国内镜像

这里我们使用淘宝云镜像进行加速,按Win+R打开命令提示符输入:

npm config set registry https://registry.npm.taobao.org

http://npm.taobao.org和 http://registry.npm.taobao.org 将在 2022.06.30 号正式下线和停止 DNS 解析。

新域名为 npmmirror.com, 相关服务域名切换规则请参考:

http://npm.taobao.org => http://npmmirror.com
http://registry.npm.taobao.org => http://registry.npmmirror.com

修改npm至新的淘宝镜像源:

npm config set registry http://registry.npmmirror.com

需要解除镜像并恢复到官方源:

npm config set registry https://registry.npmjs.org

查看npm源地址有没有换成功:

npm config get registry

3.安装Git

Git是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理,帮助我们把本地网页上传到Github。

点击进入Git下载相应版本,默认安装即可。

Git官网下载地址

Git国内镜像下载地址

检验是否安装成功:安装完成后在命令提示符中输入git --version验证是否安装成功

git --version

4.注册Github账号

Github作为全球最大的开源社区,相信朋友们都已经有了吧,如果没有,点击Github进入Github官网点击 Sign Up 注册账户。

5.创建git仓库

登录Github创建一个仓库
如下图所示,输入自己的项目名字,后面一定要加.http://github.io后缀,README初始化也要勾上。名称一定要和你的Github名字完全一样,比如你github名字叫 A,那么仓库名字一定要是 http://A.github.io

6.安装Hexo

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

选择一个磁盘,新建一个文件夹用来存放博客文件。比如我的(C/panakot Blog),在该文件夹下右键单击鼠标,点击Git Bash Here,输入以下npm命令即可安装

npm install hexo-cli -g

输入hexo -v即可检验是否安装成功,我这里就不演示了。

hexo -v

7.配置本地hexo

还是在刚才新建的文件夹下再新建一个Hexo文件夹,比如我的(C/panakot Blog/Hexo),在Hexo文件夹下右键单击鼠标,点击 Git Bash Here,依次输入以下 npm 命令即可初始化。

hexo init
npm install

初始化成功生成的文件:

接着我们输入hexo g生成静态网页,然后输入hexo s打开本地服务器,然后浏览器打开http://localhost:4000/,就可以预览我们的博客啦,如图:

显示以下信息说明操作正确:

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

按ctrl+c关闭本地服务器。

我们以后常用到的Hexo命令:

  • hexo s等价于 hexo server #Hexo 会监视文件变动并自动更新,除修改站点配置文件外,无须重启服务器,直接刷新网页即可生效。
  • hexo g 等价于 hexo generate #生成静态网页 (执行 $ hexo g 后会在站点根目录下生成public>文件夹, hexo会将"<font /blog/source/" 下面的.md后缀的文件编译为.html后缀的文件,存放在"/blog/public/ " 路径下)
  • hexo d 等价于 hexo deploy #将本地数据部署到远端服务器(如github)
  • hexo clean #清除缓存 ,网页正常情况下可以忽略此条命令,执行该指令后,会删掉站点根目录下的public文件夹

8.连接Github与本地

(1)生成密钥

右键单击鼠标,点击 Git Bash Here输入以下命令:

git config --global user.name "Name"
git config --global user.email "Email"

Name和Email是我们注册Github时的用户名和邮箱。

然后生成密钥:

ssh-keygen -t rsa -C "Email"

Email是我们注册Github时的邮箱

然后会出现:

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):
//到这里可以直接回车将密钥按默认文件进行存储

回车之后:

Enter passphrase (empty for no passphrase):
//这里是要你输入密码,其实不需要输什么密码,直接回车就行
Enter same passphrase again:

接下来会有:

Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:

这里是各种字母数字组成的字符串,结尾是你的邮箱

The key's randomart image is:

这里也是各种字母数字符号组成的字符串

现在密钥已经生成,一般存放在(/c/Users/you/.ssh/id_rsa.pub.),我们运行下面的命令将密钥复制为粘贴板:

clip < ~/.ssh/id_rsa.pub

(2)连接Github

在Github头像下面点击Settings,再点击SSH and GPG keys,新建一个SSH,名字任意。

然后将刚才复制的密钥添加就可以了,像这样:

9.本地连接Github

右键单击鼠标,点击Git Bash Here输入以下命令,如果如下图所示,出现你的用户名,那就成功了

ssh -T git@github.com
//注意不要做任何修改

用记事本打开博客根目录下的_config.yml文件,这是博客的配置文件,我们需要修改一下才能连接Github。

修改最后一行的配置:

    deploy:
      type: git
      repository: git@github.com:panakot/panakot.github.io.git
      branch: master

切记:

  • repository修改为你自己的github项目地址。
  • 每一个冒号后面都有一个空格。

10.写文章、发布文章

首先在博客根目录下右键打开Git Bash Here输入以下命令,安装一个扩展.

npm i hexo-deployer-git

然后输入下面的命令,新建一篇文章。

hexo new post "article title"

然后打开C:\panakot Blog\Hexo\source_posts的目录,可以发现下面多了一个文件夹和一个.md文件,一个用来存放你的图片等数据,另一个就是你的文章文件啦。

编写完markdown文件后,根目录下右键打开Git Bash Here输入hexo g生成静态网页,然后输入hexo s可以本地预览效果,最后输入hexo d上传到github上。

你的博客地址:https://你的用户名.github.io,比如我的是:赵晓龙的博客,现在每个人都可以通过此链接访问你的博客

11.MarkDown文章编辑器说明

前面我们提到了使用MarkDown编辑我们的博客文章。 Markdown 是2004 年由John Gruberis 设计和开发的纯文本格式的语法,非常的简单实用,常用的标记符号屈指可数,几分钟即可学会, .md 文件可以使用支持 Markdown 语法的编辑器编辑,然后将写好的文(.md文件)保存到\Hexo\source_posts 文件夹下即可。

VS Code也算是比较好用

12.更换自己喜欢的Hexo主题

点击Hexo主题进入主题专栏可以看到很多Hexo主题:

结语

一顿操作下来,初学者可能会觉得困难,毕竟很多东西都是第一次接触,当初我也尝试了好几次才成功,不要放弃,弄错了就删掉重新来过,当你把博客搭建出来会觉得受益良多的。

文章中难免有错误的地方,有大佬发现了欢迎给我指正!有的地方解释不够详细,可以百度一下看看细节,文章中的引用以及参考资料涉及侵权请联系我删除!

标签:npm,教程,Github,Hexo,hexo,Git,git
来源: https://www.cnblogs.com/xiyan122/p/16609887.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有