效果预览:点击这里
准备:1. 准备一台Windows电脑。
- 注册Git账号使用hexo框架搭建个人网站软件准备(1)Gitis available at Git官网。
参考网址:- Git安装教程:https://www.cnblogs.com/ximiaomiao/p/714456.html
- SSH key生成与配置:https://xanfengge.com/sing-ssh-key-link-githb-photo-tor.html
- Node.js官方教程:https://nodejs.org/en/
安装过程:
(1)Node安装
按照安装过程依次点击即可,安装过程很简单。
(2)安装Git
按照网上的安装方式进行安装就可以了。
安装教程
(3)安装Hexo
检测node安装是否成功:
node -v # 返回版本号
npm -v # 返回版本号
安装淘宝的镜像源(如果错误就重来,因为连接可能不稳定,不要害怕多试几次就可以了):
npm install -g cnpm --registry=https://registry.npm.taobao.org
建立一个仓库(repository):
在浏览器中打开新建页面,创建一个新的Git仓库,例如:hansonpang99.github.io。
在Blog目录下安装一个hexo部署插件:
cnpm install --save hexo-deployer-git
找到Blog文件中的_config.yml文件,使用编辑器打开(建议使用Visual Studio Code):
注:Visual Studio Code的好处:支持的语言种类多、视图简洁、拥有插件种类多。
找到这部分代码,(原始的是没有repo和branch的,而且type后面也没有东西)对这段代码进行更改:
# Deployment Setup
deploy:
type: git
repo: <你的GitHub仓库地址>
branch: master
将刚刚新建的GitHub仓库地址复制到repo字段中,然后将branch设置为管理员权限(master)。更改完成后进行保存。
在Git里面输入hexo d命令将本地文件部署到GitHub新建的仓库中:
hexo d
然后通过访问https://<你的用户名>.github.io就可以访问部署到GitHub上的个人网站了(例如:https://hansonpang99.github.io)。
进一步深化操作过程(更换个人网站的模版)这里以Next为主题进行更换:
- 首先下载Next主题:
git clone https://github.com/iissnan/hexo-theme-next.git themes/next
- 进入Blog文件目录,在终端输入以下命令安装依赖:
npm install --save hexo-renderer-ejs
npm install --save hexo-generator-sitemap
npm install --save hexo-generator-baidu-sitemap
-
打开Blog文件中的_config.yml文件,使用编辑器打开(建议使用Visual Studio Code)。
-
找到这部分代码(即theme),将冒号后面的内容改为刚刚下载的Next:
theme: next
- 然后通过访问https://<你的用户名>.github.io就可以访问部署到GitHub上的个人网站了。
hexo clean清除数据库之类的操作,hexo generate生成静态网站,hexo d将现在的文件部署到GitHub中就可以实现主题的更改。