Skip to content
💭 一个坏掉的番茄's home page
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github 💥 init !! May 13, 2019
dist 💥 init !! May 13, 2019
src (features): add semantic label May 14, 2019
.editorconfig 💥 init !! May 13, 2019
.gitignore 💥 init !! May 13, 2019
LICENSE 💥 init !! May 13, 2019 💥 init !! May 13, 2019 💥 init !! May 13, 2019
_config.yml Set theme jekyll-theme-minimal May 20, 2019
config.json (features): add semantic label May 14, 2019
gulpfile.js 💥 init !! May 13, 2019
package.json 💥 init !! May 13, 2019
screenshot.gif 💥 init !! May 13, 2019






一个坏掉的番茄 home page.

Online browsing

Do you want to install such a cool homepage for your website?

Let's start now!




  • Nodejs 6.0 above
  • Git available


git clone
cd HomePage
npm install
npm run dev


  1. Highly encapsulates all the information in the page
  2. Use scss as css preprocessor
  3. Use pug as html preprocessor
  4. Use gulp as a build tool and configure the build script
  5. Comfortable animation and beautiful UI
  6. Responsive, mobile support
  7. The referenced css andjs files do not exceed 18.5 kb in total!
  8. Delayed response switch page event
  9. Set the background dynamically according to time
  10. There are many features left for you to explore...


According to the characteristics of the project, it is divided into two categories:

  1. intro First screen
  2. main Secondary screen

The corresponding functions, styles and configurations are also based on this standard.

Custom configuration

Basic configuration

Each key name in the config.json fileconfig.json corresponds to the corresponding component name.

such as:

	"head": {
		"title": "一个坏掉的番茄",
		"description": "Author:SimonMa,Category:Personal Blog",
		"favicon": "favicon.ico"

The above configuration information corresponds to the information in the following layout/head.pug component.

	title #{head.title}
	meta(name="Description" content=`${head.description}`)
	link(rel="icon" href=`${head.favicon}` type="image/x-icon")

Advanced configuration

The supportAuthor option is turned on by default for configuration information, that is, authors are supported.

All support items are as follows:

  1. The octopus cat will be displayed in the upper right corner of the home page.
  2. The console prints the author's site information

You can turn off this behavior by setting its value to false.

Icon replacement

Icons in the project, all from 阿里巴巴矢量图标库

The replacement steps are as follows:

  1. Please select your icon, add it to the project, and change the color to white.
  2. Click Font Class method
  3. Copy the contents of the generated link
  4. Replace the contents of the file /src/css/common/icon.scss, where the contents of the icon selector must be preserved.
  5. Config.json the corresponding item in the config.jsonfilemain.ul. * .icon
.icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
	font-family: 'iconfont' !important;
	font-size: inherit;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;


After executing npm run build under the root directory, the project file will be generated to the dist directory.

You can then deploy the dist directory to your favorite server hosting provider.

The following is an example of GithubPage:

  1. create Repo

  2. cd dist
    git init 
    git add -A
    git commit -am"init"
    git remote add origin
    git push -f origin master
  3. Then set the repo's Github Page option in GitHub.

  4. Visit to browse!

If your previous username. repo already has content, you can create another repo, such as blog.

Then migrate the occupied items to blog and set the GithubPage option for this repo.

The repo became a subdirectory of username.

In this way, your username. repo can be left to the home page!


I spent a lot of time and energy to develop this project.

If this project has brought you help, welcome to sponsor, star.

Thank you!


The Project is released under the LGPL-3.0 license.

You can’t perform that action at this time.