GithubPage或宝塔面板 – 部署一个漂亮精致的开源主页(一个坏掉的番茄)

文章目录 展开

昨天大鸟把hugo的静态网页push到了github，当然利用hugo可以搭建非常漂亮的静态博客，喜欢折腾的可以去gohugo.io下载更多的漂亮主题去折腾。

大鸟无意中发现一个漂亮的不像话的主页：一个坏掉的番茄。这名字很有意思哈，因为作者已经把这个主页开源，所以没必要去拔下来了。这篇文章，我们就把这个漂亮的开源主页push到github，从而搭建一个自己的个人网站。学习本文之前，我们还需要看一下几篇文章：

一：一个坏掉的番茄

故事从一个坏掉的番茄开始说起：

官网：https://tomotoes.com/

安装文档：https://tomotoes.com/blog/open-source-homepage-for-tomotoes/

github：https://github.com/Tomotoes/HomePage

二：准备工作

在github注册账号，注册号之后新建一个Create a new repository，这个昨天的教程已经说过了，就不多讲。

2.1必备条件

Nodejs 6.0 以上
Git 可用

这里如果不想在本地搭建可以在装有宝塔面板的服务器上来安装也可以，一个个人主页，随便找个服务器放放都没问题。主要是github免费，还而且逼格有点高，push的感觉也很不错，所以就放那上边放。

2.2安装

打开cmd或者git cmd。git cmd是安装Git的时候自带的。输入如下命令：

git clone https://github.com/Tomotoes/HomePage.git
cd HomePage
npm install
npm run dev

但是可恨的是我们的电脑上没有Nodejs 6.0，额，去官网下载吧：

下载地址：https://nodejs.org/zh-cn/download/

不过可恨的是还不会安装，可以默认安装如果是下载的二进制文件，我们设置一个环境变量就可以了。

上面的做好之后，npm install开始，看截图：

之后执行npm run dev出错也不管，因为已经在D:\HomePage（大鸟是放在D盘根目录的）的文件夹下面生成了dist目录，这个目录就是全部的静态网页的文件。你可以将dist目录部署到你喜欢的服务器托管商。

三：push到githubpage

这里以GithubPage 举例：新建你的用户名.github.io 仓库，这个和前面说的hugo博客推送到github是一样的，可以参照前文，命令如下，我们进入dist目录鼠标右键打开【git bash here】：

cd dist
git init 
git add -A
git commit -am"init"
git remote add origin https://github.com/你的用户名/你的用户名.github.io.git
git push -f origin master

我们可以看看执行命令的截图：

因为大鸟是在dist目录打开git bash的，所以省略掉了cd dist。我们到自己的github刷新:

已经push成功，可以用【你的用户名.github.io】来打开网页了，截图：

我们enter，看看另一个截图：

四：宝塔面板设置

我们可以用宝塔面板来建站的功能来打开这个主页，宝塔面板→网站→新建网站，随便弄一个测试域名。我们把dist目录下的网站文件复制到网站根目录，然后用域名打开即可。

五：修改之后推送

我们需要修改下网页中的内容为自己的链接，打开dist目下的index.html文件修改即可，如果你喜欢用github的高逼格的感觉，那你修改之后还需要把修改的文件push到你自己仓库。命令如下:

git status 
git add -u    #添加修改过的文件到索引库 
git status    #再次检测 
git commit -m “modify  #将修改从暂存区提交到本地版本库 
git pull    #从远程获取最新版本并merge到本地 
git push    #将本地版本库的分支推送到远程服务器上对应的分支 

#如果You are not currently on a branch, so I cannot use any 'branch.<branchname>.merge' in your configuration file. 

git checkout -b temp #切换到一个临时的分支 
git checkout master #再切换回主分支，就可以恢复到master repository的状态，然后就可以push和pull了

注意，以上命令都要要在你的本地文件的根目录下面操作。我们看看大鸟修改过push到github的截图：

六：总结

这个主页还可以，作为一个引导页也不错，但是大鸟是不喜欢的，估计有人喜欢。用修改文件提交到github有点麻烦，如果你用宝塔面板来搭建这个网站的时候修改就会方便很多。

如果你觉得一个主页还需要git clone 、安装nodejs还有一大顿命令要操作，你可以直接到大鸟的github下载，修改之后，可以上传到你的服务器上，绑定一个域名就可以访问了。这页面颜值还是可以的。

github：https://github.com/angtnt/angtnt.github.io
github下载：https://github.com/angtnt/angtnt.github.io/archive/master.zip
clone：https://github.com/angtnt/angtnt.github.io.git
演示地址：https://angtnt.github.io/