How to create your personal homepage

How to create your personal homepage

七月 10, 2020

碎碎念：好多之前的博客也是没坚持多久就不接着写下去了，过几天把比较有价值的搬运过来。开始Github Pages也是因为一个很喜欢的师妹，给我看了她自己的网站，简直！酷炫！太符合她的人设啦~ 新鲜感驱使我在一大堆bug里乘风破浪，搭了这个小窝，希望这次可以坚持地久一些。

安装Node

  • 在Node官网下载对应版本的软件，按默认方式一路安装直至成功。

  • 验证：进入cmd，输入以下代码，如果显示Git版本信息说明安装成功。

    1
    node -v

安装Git

  • 在Git官网下载对应版本的软件，按默认方式一路安装直至成功。

  • 验证：进入cmd，输入以下代码，如果显示Git版本信息说明安装成功。

    1
    git --version

  • 这时候对任意一个文件夹点右键，会有多出来两个选项“Git GUI Here”和“Git Bash Here”

安装Hexo

  • 选择一个存放blog文件的路径，新建文件夹，重命名为你想要的名字，我就用了myblog命名文件夹，鼠标放在myblog文件夹上点右键，选择Git Bash Here（之后很多操作都会从Git Bash Here开始）。依次输入以下命令，安装完输下一个。

    1
    npm install hexo-cli -g
    1
    npm install hexo-deployer-git --save

    然后就静静等待他叭啦叭啦装完。

初始化Hexo

  • 执行以下初始化命令，会自动在你命名的文件夹（这里是blog）中新建所需要的文件。

    1
    2
    3
    hexo init blog
    cd blog
    npm install

    顺利的话，运行下面的命令，在浏览器中输入http://localhost:4000 就可以看到网页的预览效果了。

    1
    hexo s

建立Github Pages

  • 注册Github就不多说啦，注册完新建repositories，Github只能用一个同名仓库的代码托管一个站点，注意一下就好。

  • repository name 必须是以 github.io结尾，比如我的 andromeda.github.io，硬性规定遵守即可。

    （我这里因为新建过同名仓库了，所以显示不能用这个名字）

    1

  • 新建仓库完成后，进入该仓库的Settings，查看和熟悉一下，往下拉有个Github Pages，下面这个画横线的站点就是我们创建的个人网页地址，放收藏夹哈之后会一直用到的。选择master branch，如果这个选择是灰的，就先点下一个按键，选一个主题之后就自动master branch啦~

    3

    先看一眼我踏过千山万水、填过千沟万壑之后的blog成品图

    好搞笑哦，能看到这篇博客的应该也能看到主页吧！多此一举多此一举。go on~

配置SSHkey

  • 要使用git工具首先要配置以下SSH Key，为部署本地博客到Github做准备。在第一次新建的文件夹里面 Git Bash Here 输入以下命令：

    1
    cd ~/.ssh

    如果没有报错或者提示什么的就说明是以前生成过的，可以直接使用以下命令查看本机SSH Key

    1
    cat ~/.ssh/id_rsa.pub

    如果之前没有创建，就执行以下命令配置本地账户

    1
    2
    3
    git config --global user.name
    git config --global user.email
    ssh-keygen -t rsa -C user.email

    按照提示敲三次回车，就可以生成啦。再通过cat ~/.ssh/id_rsa.pub查看key就可以了。

    然后需要确认并添加主机到本机SSH可信列表，输入

    1
    ssh -T git@github.com

    如果返回 Hi XXX！……等一系列话，就说明你添加成功了。接下来去Github网页版右上角点+号，找到Settings-SSH and GPG keys-New SSH key，复制刚刚生成的SSH Key并生成就OK了。命令行窗口可以不用关掉，之后还要来用的！

    5

连接Github与本地blog文件

  • 打开博客根目录下的_config.yml 配置文件，拉到最后，在deployment段落中填上以下信息：

    4

    第一个大坑来了！！！除了网上各大教程都说了的，要在冒号后面加一个空格之外！！！千万千万千万不要修改type\repository\branch前面的缩进！一定是要在原始的格式上，在冒号后空一格填上你对应的信息……可能大家也没有我这么手贱，去强行缩进和改动，以至于后面一直一直部署不了。

  • 修改完之后就可以继续在命令行窗口输入下面的generate代码：

    1
    hexo g -d

  • 稍等几十秒，最多几分钟，就可以在浏览器上输入你自己的站点，然后看到最原始的博客界面啦！

好看最重要！

接下来一定是去hexo模板官网找一个好看的模板了呀！个人比较喜欢简洁大气的风格，用的是diaspora。之前拍的写真可以派上用场了喜喜。

不同的模板有不同的安装和配置方法，这里就不详细展开啦，大家自行百度 ”xxx模板 hexo配置“ 基本都可以找到教程，换上自己喜欢的背景图片和logo，一个专属的网页就生成啦！

具体的写作和数学公式以及图片显示等等细节，可以参看这个Hexo中文文档。

最后提醒自己一百遍：坚持坚持坚持！！！