PhysIKA网站搭建

了解并掌握PhysIKA网站建设,包括环境的安装和配置

环境配置与安装说明

推荐IDE

PhysIKA网站开发IDE推荐使用Visual studio code

安装Hugo

您需要下载 recent extended version (我们推荐0.53以上的exended版本)hugo 来在本地构建网站。

一定要下载extended版!

一定要下载extended版!

一定要下载extended版!

如何您已经安装了hugo,通过命令行可以查看hugo的版本信息:

hugo version

Windows用户

1.下载hugo可执行文件

点击 链接 下载hugo可执行文件。一定要下载extended版! 例如windows 64位的电脑用户推荐下载:hugo_extended_0.78.2_Windows-64bit.zip

2.配置环境变量

将hugo.exe程序配置到环境变量中。路径中最好不要有空格,不然会出现一些奇怪的bug。

例如,路径D:\Hugo\bin是可以的。路径D:\Program Files (x86)\hugo\bin就可能会产生问题。

Linux用户

千万不要使用sudo apt-get install hugo来安装hugo,因为它目前无法获得extended版本。

如果您已经安装了hugo,请检查您的版本:

hugo version

如果您当前安装的是v0.52 或者更早的版本,或者当前版本不是Extended版,那么您需要卸载重新安装。步骤如下:

  1. 打开hugo官网hugo releases

  2. 找到带有Extended 字样的版本。

  3. 下载最新的Extended版本 (例如hugo_extended_0.78.2_Linux-64bit.tar.gz)。

  4. 创建一个文件夹:

    mkdir hugo
    
  5. 解压下载的 hugo文件。

  6. 进入解压目录:

    cd hugo
    
  7. 安装hugo:

    sudo install hugo /usr/bin    
    

macOS用户

使用Brew来安装hugo。

安装Node.js和npm

如果您已经安装了Node.js和npm,通过在命令行中运行以下指令查看安装的版本:

node -v
npm -v

点击下载 安装Node.js和npm。

安装PostCSS

如果您已经安装好了Node.js和npm。您还需要安装PostCSS,它可以用来更新网站的CSS资源文件。安装方法如下:

在命令行中输入:
npm install postcss --save-dev
npm install -D --save autoprefixer
npm install -D --save postcss-cli

拉取PhysIKA Webset项目并运行

  1. 创建一个文件夹,拉取PhysiKA webset项目:

    git clone https://github.com/PhysikaTeam/PhysIKA-website.git
    
  2. 进入文件夹:

     cd physIKA-website
    
  3. 运行hugo服务器:

     hugo server
    
  4. 在浏览器中输入: http://localhost:1313/来查看PhysIKA网站。您可以通过Ctrl + c来关闭hugo服务器。

以Windows命令行为例,进入PhysIKA-website文件夹,输入“ hugo server”启动本地服务器。启动成功后如下图所示: screen shot

发布PhysIKA网站

  1. 生成public文件夹

     cd physiIKA-website 
     hugo
    
  2. Push项目(如果你有权限的话)

     cd public 
     git init
     git add -A
     git commit -am "init"
     git remote add origin https://github.com/PhysikaTeam/PhysikaTeam.github.io
     git push -f origin master
    
  3. 修改Custom domain(如果你有权限的话)

    Push项目后,稍等几分钟您就可以通过网址(https://github.com/PhysikaTeam/PhysikaTeam.github.io)来查看网站。 如果您想通过www.physika.net 来访问网站,您必须在项目settings中的Custom domain中添加域名。 域名添加后不会马上生效,需要等待几分钟。

如果这个项目对您有帮助,给个star,点个关注吧。