How to edit

So you want to edit the website and post news? Then you've come to the right page!

The following assumes you have a Debian or Ubuntu machine and that you want to write on it rather than writing via a shell account on the web server.

1. Get a hackerspace account (FreeIPA) and make sure you can ssh into web.local and/or umeahackerspace.se
2. Get added to the www-writers group on web.local
3. sudo apt install ssh git pelican (pelican >= 4.0.1+dfsg-1.1 should work)
   • Alternatively source setup_activate_env.sh instead of installing pelican via apt
4. cd to whereever you want to have the www repository on your machine
5. git clone username@umeahackerspace.se:/srv/www/vhosts/se/umeahackerspace/%/www.git
6. cd www
7. Run ./develop_server.sh start 8080. This will run a simple web server locally on your machine for editing. Whenever a file changes the site will be rebuilt on your machine
8. Point your browser to http://localhost:8080/
9. Run ./create_article.sh. It will ask you for what you want to put in for title and author
10. Edit content/whatever-slug.md using your favorite editor. After each save, refresh your browser and you should see your changes
11. Once you are done editing, git add content/whatever-slug.md && git commit -m "Some message" && git push
12. A post-receive hook on web.local will make sure the website compiles fine. If it does then it will accept the push and the website will be updated!
13. Run ./develop_server.sh stop if you're done

Once you're set up the workflow is easier:

1. git pull && ./create_article.sh && ./develop_server.sh start 8080 && firefox http://localhost:8080/
2. Edit
3. git add $FOO && git commit -m "Message" && git push && ./develop_server.sh stop

Pictures

It's nice to have pictures with posts. Here's how to insert them.

If you have pictures from a digital camera it may be prudent to strip EXIF data from them and also resizing them. ImageMagick can do both (sudo apt install imagemagick):

convert ~/somewhere/original.jpg -resize 640 -strip content/images/thumb.jpg

As the command suggests, pictures go in content/images. If the image file isn't huge then converting it is not necessary. While we have plenty of bandwidth in the space, not all of our site's visitors do.

To insert an image insert the following markdown code:

![Put descriptive alt text for blind people here]({static}/images/thumb.jpg)

You can also link the original image (assuming you put it in content/images) using the resized image as a thumbnail, like so:

[![Put descriptive alt text for blind people here]({static}/images/thumb.jpg)]({static}/images/original.jpg)

It's also possible to use good old HTML if you need more control over how the pictures are laid out, for example if you want to center them.

Examples

![A spider partying hard]({static}/images/party_hard2.gif)

To do CSS stuff you can either use HTML like so:

<img alt="A spider partying hard" src="{static}/images/party_hard2.gif" style="display:block; margin-left:auto; margin-right:auto"/>

or you can use markdown's {} syntax like so:

![A spider partying hard]({static}/images/party_hard2.gif){style="display:block; margin-left:auto; margin-right:auto"}

It's also possible to specify CSS classes in markdown, for example the center class available in main.css:

![A spider partying hard]({static}/images/party_hard2.gif){class=center}

Just think of the possibilities!

![A spider partying hard with a bunch of awful CSS transforms]({static}/images/party_hard2.gif){style="scale:-100% 75%; filter: blur(5px) hue-rotate(90deg) invert(75%); transform: rotate(15deg); display:block; margin-left:auto"}