超详细Hexo创建个人博客

Hexo创建个人博客

    • 搭建过程
      • 1.git安装
      • 2.Node.js安装
      • 3.Hexo安装
      • 4.GitHub创建仓库
      • 5.生成SSH添加到GitHub
      • 6.将hexo部署到GitHub
    • Hexo常用指令简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。其静态响应速度快,免费托管在github上。
不过也有一些小缺点,比如没有数据库的支撑,所以它在批量修改数据或者说文章内容不方便。
Hexo官网

搭建过程

  1. 安装git

  2. 安装Node.js
    因为Hexo是基于Node.js编写的,所以需要安装Node.js和其npm工具(Node.js的包管理工具)。

  3. 安装Hexo

  4. 关联到GitHub:包括创建仓库、生成SSH添加到GitHub等。

1.git安装

用来管理Hexo博客文章,是上传到GitHub的工具。推荐教程廖雪峰

2.Node.js安装

  • windows:选择LTS版本就可以。
  • 以.msi安装包为例,根据安装向导即可。其中可修改安装路径、选择安装类型。推荐默认设置即全套下载好npm和Node.js主体等。
  • 推荐勾选Automatically 那个选项,可以自动安装所需的python2和chocolatey。之后弹出cmd框,按任意键继续并等待安装完成自动关闭。
  • 最后用cmdgit bash分别输入以下,检查是否安装成功。如出现版本号即OK。
    node -v
    npm -v

3.Hexo安装

git和Node.js安装完成后,cmdgit bash输入

npm install -g hexo-cli

完成后,hexo -v检查安装是否成功。接下来:

  • 初始化Hexo
  1. 在想新建文件夹的目录中,命令行进入。输入
hexo init blog
   其中blog是要建立的文件夹的名称,任取。

超详细Hexo创建个人博客_第1张图片
超详细Hexo创建个人博客_第2张图片

  • node_modules: 依赖包
  • public:存放生成的页面
  • scaffolds:生成文章的一些模板
  • source:用来存放你的文章
  • themes:Hexo主题
  • _config.yml: 博客的配置文件
  1. cd进入该blog文件夹下,执行以下命令,安装npm:
npm install
  1. 现在可以试试看是否已经初始化成功,执行如下命令,开启本地 Hexo 服务器:
hexo s

此时,浏览器中打开网址(默认是4000端口) http://localhost:4000 ,能看到如下页面
超详细Hexo创建个人博客_第3张图片
使用ctrl+c可以把服务关掉。

4.GitHub创建仓库

  1. 首先,有一个GitHub账户并登录。New repository新建仓库。新建名称为

您的用户名.github.io

只有这样,部署到GitHub page的时候才能够被识别。也就是xxxx.github.io,其中xxx就是注册GitHub的用户名。

  1. Description可写可不写,随意。
  2. 勾上Initialize this repository with a README。
  3. 点击Create Repository完成创建。
  4. 开启 GitHub Pages。
    Setting仓库在这里插入图片描述
    找到GitHub Pages,设置Source为master branch。我的已经完成所以没有显示选项。
    超详细Hexo创建个人博客_第4张图片

5.生成SSH添加到GitHub

git bash中,

git config --global user.name "yourname"
git config --global user.email "youremail"

yourname为自己的GitHub用户名;
youremail输入你GitHub的邮箱。

可以用以下方法,检查有没有输对

git config user.name
git config user.email

然后创建SSH,一路回车

ssh-keygen -t rsa -C "youremail"

此时它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。
ssh,是一个秘钥,其中,

  • id_rsa是你这台电脑的私人秘钥,
  • id_rsa.pub是公共秘钥。这个公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥。

最后在GitHub的setting中,找到SSH keys的设置选项,点击New SSH key。把你的id_rsa.pub里面的信息复制进去

在gitbash中,查看是否成功

ssh -T [email protected]

6.将hexo部署到GitHub

将Hexo生成的文章部署到GitHub上。

  1. 打开站点配置文件 _config.yml,翻到最后,修改
    YourgithubName为自己的GitHub账户。
deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

或由下位置获取,
超详细Hexo创建个人博客_第5张图片

  1. 安装deploy-git ,也就是部署的命令,来帮助我们推到仓库上,实现用命令部署到GitHub。
npm install hexo-deployer-git --save
  1. 然后
hexo clean
hexo generate
hexo deploy

其中 ,

  • hexo clean清除了你之前生成的东西,也可以不加。
  • hexo generate 顾名思义,生成静态文章,可以用 hexo g缩写
  • hexo deploy 部署文章,可以用hexo d缩写
    注意deploy时可能要输入username和password。
    为避免每次输入 GitHub 用户名和密码的麻烦,可参照我的另一篇文章优化(个性化设置) 添加ssh key 到 GitHub进行优化。
  1. 如下,完成。等下就可以通过http://yourname.github.io 这个网站看到你的第一个博客啦!

超详细Hexo创建个人博客_第6张图片
默认为hello-world.md,效果如下
超详细Hexo创建个人博客_第7张图片

Hexo常用指令简介

先来试试吧!后面整理详细版~

hexo new "postName"        //新建文章
hexo new page "pageName"        //新建页面
hexo g          //生成静态页面至public目录
hexo server         //开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy         //将.deploy目录部署到GitHub
hexo clean
hexo g
hexo d
hexo d -g #生成部署
hexo s -g #生成预览

可以参考

https://blog.csdn.net/BEICHENx1/article/details/103300873?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

https://blog.csdn.net/sinat_37781304/article/details/82729029

你可能感兴趣的:(Hexo个人博客,github,git)