Webseite der O-Phasen Gruppe »Studier Langsam« der Informatiker am Karlsruher Institut für Technologie https://studierlangsam.de
|Joshua Gleitze 8eff45f635 add note about new CoronaVO||6 months ago|
|content||6 months ago|
|graphic||2 years ago|
|images||6 months ago|
|layout||3 years ago|
|script||3 years ago|
|static||3 years ago|
|style||2 years ago|
|.eslintrc||4 years ago|
|.gitignore||2 years ago|
|.scss-lint.yml||3 years ago|
|.tern-project||4 years ago|
|Dockerfile||6 months ago|
|README.md||1 year ago|
|deployment.yaml||1 year ago|
|favicon.ico||4 years ago|
|gulpfile.js||1 year ago|
|httpd.conf||1 year ago|
|package-lock.json||6 months ago|
|package.json||6 months ago|
Then you can install all dependencies by running
npm install from the project folder.
sudo apt install imagemagick graphicsmagick
In order install gulp’s CLI globally (which is much more comfortable), run (on Debian):
sudo npm install gulp-cli -g
The project consists of these folders:
build(not in git) contains the development build of the page.
contentcontains the content pages. These pages use the layouts from the
layoutfolder. The contained
.pugfiles will be rendered using Pug and be copied to the web page root. Any file
[name].pugwill be copied to
[name]is not already
index. Keep that in mind when creating links!
graphiccontains graphics that are part of the pages’ layout. The folder will be copied to the web page without modification. Some contained SVG pages will be inlined into the rendered HTML pages.
imagescontains content images in their original resolution and quality. They will be copied to the web page after being scaled as needed.
layoutcontains Pug files that form the page’s layout. These layouts are used in the content pages using Pug’s Inheritance and Blocks mechanism.
node_modules(not in git) is used by
npmto store dependencies.
release(not in git) contains the release build of the page. These are the exact files that will be uploaded by
stylecontains SCSS files that will be rendered into the web page.
There are two types of builds for this project: Development builds and release builds. The page should look the same for both builds. However, the results produced by a development build are better suited for debugging, while the results of a release build are significantly better optimised.
During development, run
gulp watch from the project folder.
This will start a development server at
localhost:3000 (or the next free port after that).
The page is automatically rebuilt and reloaded in the browser as you make changes to the source files.
To check the source files against the coding conventions, run
gulp check from the project folder.
In order to upload the site to the production server, you need to have
Additionally, you have to ask Joshua Gleitze (email@example.com) for credentials.
After that, you can upload the page by running
gulp deploy --dversion <version> from the project folder.
The command will produce a release build, build a container image with it, and deploy a container using the image.
<version> in the command with the new deployment version.
Please pick the new deployment version according to Semantic Versioning rules.
You can query the currently deployed version by running:
kubectl -n studierlangsam get pod --selector app=studierlangsam.de --output "custom-columns=deployed image:.spec.containers.image"
If you want to preview what exactly will be uploaded, run
The command serves the release build through a local web server.
It will however, unlike
gulp watch, not pick up any changes to the source files.
When writing, please look at other pages to get the general structure and style of this project. Some notes:
layout/mixins. Please look at what is already there and always use the mixins if applicable. Feel free to add other helper mixins there and include them in
Link(URI path to the page) and
Schlagwörter(keywords for the page). Other constants can be set for later usage in the page.