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

文章源自大鸟博客-https://www.daniao.org/5365.html

故事从一个坏掉的番茄开始说起:文章源自大鸟博客-https://www.daniao.org/5365.html

官网:https://tomotoes.com/文章源自大鸟博客-https://www.daniao.org/5365.html

安装文档:https://tomotoes.com/blog/open-source-homepage-for-tomotoes/文章源自大鸟博客-https://www.daniao.org/5365.html

github:https://github.com/Tomotoes/HomePage文章源自大鸟博客-https://www.daniao.org/5365.html

在github注册账号,注册号之后新建一个Create a new repository,这个昨天的教程已经说过了,就不多讲。文章源自大鸟博客-https://www.daniao.org/5365.html

2.1必备条件文章源自大鸟博客-https://www.daniao.org/5365.html

  • Nodejs 6.0 以上
  • Git 可用

这里如果不想在本地搭建可以在装有宝塔面板的服务器上来安装也可以,一个个人主页,随便找个服务器放放都没问题。主要是github免费,还而且逼格有点高,push的感觉也很不错,所以就放那上边放。文章源自大鸟博客-https://www.daniao.org/5365.html

2.2安装文章源自大鸟博客-https://www.daniao.org/5365.html

打开cmd或者git cmd。git cmd是安装Git的时候自带的。输入如下命令:文章源自大鸟博客-https://www.daniao.org/5365.html

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

但是可恨的是我们的电脑上没有Nodejs 6.0,额,去官网下载吧:文章源自大鸟博客-https://www.daniao.org/5365.html

下载地址:https://nodejs.org/zh-cn/download/文章源自大鸟博客-https://www.daniao.org/5365.html

不过可恨的是还不会安装,可以默认安装如果是下载的二进制文件,我们设置一个环境变量就可以了。文章源自大鸟博客-https://www.daniao.org/5365.html

文章源自大鸟博客-https://www.daniao.org/5365.html

上面的做好之后,[code]npm install[/code]开始,看截图:文章源自大鸟博客-https://www.daniao.org/5365.html

文章源自大鸟博客-https://www.daniao.org/5365.html

之后执行[code]npm run dev[/code]出错也不管,因为已经在D:\HomePage(大鸟是放在D盘根目录的)的文件夹下面生成了[code]dist[/code]目录,这个目录就是全部的静态网页的文件。你可以将dist目录部署到你喜欢的服务器托管商。文章源自大鸟博客-https://www.daniao.org/5365.html

文章源自大鸟博客-https://www.daniao.org/5365.html

这里以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的,所以省略掉了[code]cd dist[/code]。我们到自己的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/

原文链接:https://www.daniao.org/5365.html

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享