Welcome to my blog.
网上已有很多关于博客搭建的教程,但大都较为模糊且有点瑕疵,这里根据这个网站的搭建经验,来介绍下我的方法和过程中出现的一些问题。由于本人建造前对这类问题也是一知半解,所以本篇教程对小白非常友好。
前言
首先准备的要下载到本地的工具有git,nodejs,其次要在github上注册一个账号,如果你还有一个域名的话更好,但是本篇教程不介绍如何把github pages网页绑定到指定域名,相关内容可以自行百度。
在github中创建网站
在github主页新建一个Repository,name填写 xxx.github.io,xxx一般为你的用户名,选择public(如果你不想付费的话),新建完成后,在你的repository页面点击设置,找到github pages,点击选择主题,随意选择一个后你的一个线上网站便建立成功。可以访问xxx.github.io观看。
配置git
git的配置比较简单,下载安装完成后,鼠标在任意文件夹任意空白处右键,会多出两个选项:”git GUI here”,”git bash here”。在任意位置点击”git bash here”,打开操作界面。
设置用户名和邮箱
git config --global user.name '你github的用戸名'
git config --global user.email '你github的登录邮箱'
生成密钥并绑定
ssh-keygen -t rsa -C'你的登录邮箱'
如果它要求输入密码,回车即可。
记事本打开.ssh文件夹下的id-rsa.pub文件(如果找不到可以用everything软件搜索),复制里面的内容,之后打开github主页,点击你的头像,点击设置,点击SSH and GPG keys,点击New SSH key,粘贴保存即可。
配置nodejs
nodejs安装时建议安装到一个指定的文件夹,方便后续操作,如我是下载到D:\Program Files\nodejs。
安装完成后,如果怕安装出现问题,可以在cmd或是刚才的git bash中输入。
node -v
npm -v
如果出现版本号,则代表已经安装成功。
另外可以输入以下命令判断密钥是否绑定成功。
ssh -T git@github.com
安装成功后,打开安装文件夹,在nodejs文件夹里新建两个文件node_cache和node_global,之后在bash中输入命令
npm config set prefix "你的node_global路径"
npm config set cache "你的node_cache路径"
路径即从文件上方地址栏复制即可
右键此电脑-属性-高级系统设置-环境变量,在系统变量中新建,变量名为NODE_PATH,值为”你的node_global路径\node_modules”,用户变量和系统变量的path点编辑,找到nodejs或者新建加入nodejs文件夹的路径。
之后,在c盘目录下检查下有无C:\Users{账户}\下的.npmrc文件,如果有把它删除掉,记住,不是node.js安装目录下的那个!
这步不做之后安装hexo会不停报错或直接卡住,感谢让我找到解决方法的博文。
安装hexo
在git bash中输入
npm install -g hexo
等待安装完成即可。
在本地建立网站
在电脑某个地方新建一个文件夹,名字随意,如myblog,在bash中输入
cd "你的myblog地址"
hexo init
hexo会自动在这里生成一个网站的雏形,在myblog中右键,点击git bash,输入
hexo g
hexo s
#或者
hexo s -g
生成本地预览,打开浏览器输入 http://localhost:4000 即可欣赏诞生于你手中的网站。
用记事本打开myblog文件夹中的_config.yml文件,在末尾进行如下修改
deploy:
type: git
repo: xxx
branch: main #这里其他教程都是master,但是github更新后改为main了,主要取决于你的repository页面是main还是naster
其中xxx部分,在你的github的repository页面中点击Code-SSH,将文本框中git开头的部分粘贴过来。
_config文件继续上翻,per_page建议改为6的倍数,如12,18等,url改为之前你的github建立的网站网址,language改为zh-CN,作者等信息可以自行更改,不影响网站建立。
更改完成后,在bash中输入
npm install hexo-deployer-git --save #安装一个插件
hexo d -g
当然可以在前面加一个清除缓存的操作
hexo clean
便可以将你的本地网页同步至github网页。
如果github网页没有改变,可以检查下设置,把里面的master改为main。
更改主题
我用的是Matery主题,更改方法可以参考下作者的github主题主页,点击中文即可看中文说明。