Website for CSSconf EU 2017

1. Adding and editing content
2. Run locally
3. Development
4. Deployment

Content editing

The following instructions apply to adding / editing talks, speakers, and sponsors. For the schedule and navigation bars, see the README in /_data

Adding / editing talks, speakers, and sponsors

• Each content item is represented as a Markdown file with YAML at the top. The data should look something like this:

  ---
  property: "value"
  other_property:
    - "list"
    - "of"
    - "values"
  ---
  

To add new content through GitHub:

1. Click into the appropriate directory (/_speakers, /_talks, /_sponsors)
2. Copy the data from an existing .md file
3. In the parent folder, click Create new file
4. Paste the data into GitHub and edit OR paste it in an online YAML editor (helps avoid syntax errors, but you gotta paste it in without the enclosing ---)
5. Edit to your heart’s content!
   • The filename you choose may determine the content page URL
   • The blabla_id property can be the same as the filename
6. When finished, fill in a commit description and select Create a new branch for this commit and start a pull request.
   • (If it’s a small change not likely to break anything, you might consider skipping the pull request and just committing directly)
7. Wait to see if the created pull request passes the build. If it does, click merge and your changes will be live

Run locally

In case you want to run the website locally, please make sure all of the external dependencies are resolved. We try to keep as few dependencies as possible in order to simply the development process.

Cloning the repository

Before you can start working on the project, please clone the GitHub repository by running the following:

git clone git@github.com:cssconf/2017.cssconf.eu.git

This will fetch all of the source files from GitHub and will place them in the directory called "2017.cssconf.eu". Please navigate to it in order to continue the set up.

Dependencies

• Ruby (2.0.0)
• Ruby gems
• NodeJS

Installing dependencies

Ruby

macOS/Linux

You should have Ruby installed by default. To check if you have it, please open the terminal and put the following:

which ruby

It should show something like this:

➜  ~ which ruby
/usr/bin/ruby

The project requires at least Ruby 2.0.0. In case your Ruby is older than 2.0.0, please upgrade it.

Windows

Please follow the official installation guideline.

Ruby gems

Once having Ruby installed and working, you have to install bundler which is going to take care of all of the dependencies:

gem install bundler

Now, you can install all of the gems by running the following:

bundle install

NodeJS

Follow the installation instructions on nodejs.org

Once you install Node, run npm install

Development

Run a dev server with npm start

The site is built using Jekyll.

Use and update assets

Some assets, including most all CSS, are located in a separate repo (2017-assets) and loaded as a dependency. That means if you need to make CSS changes you’ll need to make your edits there.

To avoid reinstalling dependencies every time you make a CSS change, you can use npm link to always grab the latest CSS from your local clone. Just clone the 2017-assets repo somewhere and from the 2017.cssconf.eu folder, run npm link ../path/to/2017-assets. You should only need to do this once.

Note: If you use npm link you may start seeing a bunch of warnings whenever you run npm install. Seems to be a bug in NPM? Don’t worry about it!

Troubleshooting

Not seeing your changes render on the site? Deleting your node_modules/ folder and re-running npm install and or deleting the Jekyll output folder _site sometimes works wonders.

SVG

There’s a helper component to make including an SVG as simple as this: {% include helpers/svg id="circle" %} The id must be the file-name of any svg inside the svg folder in assets. The output will be an inlined SVG, meaning it can be styled and animated with CSS.

Deployment

To publish in production, have your changes merged into gh-pages on cssconfeu/2017.cssconf.eu

If you have made changes to the markup / code / style, first make sure the assets/ folder is up to date (ensure this via gulp build) and is committed to git.