We will set up a pipeline to create or change Discourse Theme and preview the changes to the theme live.
- Discourse installed locally.
- Have a GitHub account and have access to this repository.
In this module, we will work on the following things:
|1.||Setup files and directories structure for developing Discourse Theme.|
|2.||Push/Pull Discourse Theme code to GitHub.|
|3.||Cloning the Theme from GitHub submodule.|
|4.||Preview Theme live on online Discourse Theme Creator Site.|
|5.||Preview Theme live on Discourse running in the local machine.|
After successful completion of this module, you will have developed the following skills:
- Setup Discourse Theme Development environment.
- Develop and preview Discourse Theme live.
- Some HTML and SCSS codes.
- Further knowledge on GitHub and Git submodule system.
- Preparation for project management tool Trello (will be used when Theme Development starts)
Self-Assessments are very important because it is the way to keep a record of all your highlights and achievements (helps a lot when creating/updating resume). Also, it is required by STEM-Away to be able to generate certificates and 1-Click Resume. Most of the big companies also use the same technique of self-assessments to evaluate their employee’s performance.
Where can you find about self-assessment?
You can find it here.
Getting Started Ahead
Here are the brief steps on what we will do on the webinar and for Module 3. If you are confused or stuck with any of these steps, do not worry, we will go through them at our next meeting. Also, feel free to post any questions.
Module 3 - Getting Started
Pipeline Setup for Theme Development
There are two ways to create a Discourse Theme.
- Local Theme - Writing code in the website itself.
- Remote Theme - Written in local machine and pushed to GitHub (we will use)
The general directory structure for any theme will look similar to:
common-> folder where we will have common HTML/SCSS/CSS files.
desktop-> folder where we will have files for desktop view.
mobile-> folder where we will have files for mobile view.
scss-> folder where we will have .scss files like variables.
about.json-> json file containing the information about theme.
settings.yml-> settings for theme (example: specify icons, colors, etc).
Inside common/desktop/mobile folder, we can have these kinds of files where we write the code. The name of the files is descriptive enough.
Discourse Theme Development Guide
After writing all the required codes, to test it manually: Zip the Theme folder and upload it to the Discourse Theme Install Section in the website. You can do this in two ways:
- Using this website. Create an account and you can upload your themes and preview here.
- Using local Discourse instance. Run the discourse server and upload the zipped theme folder.
To test it using GitHub (recommended way), select install from GitHub instead of uploading Zip in Theme Install Option on the website. And paste the repository of the GitHub Theme.
- The above-mentioned skeleton is available in this GitHub repo. You can clone it to your machine and start modifying it. Just make sure to work on a branch, and not the master branch. Or, please feel free to create the files and folders on your own from the scratch.
- Modify/write some codes, push your branch to GitHub.
- Using the Discourse Theme Creator website or your local Discourse instance, clone your branch, and preview the theme.
- You will only need to clone your GitHub branch once. From next time, when you push some changes to the GitHub branch, you can just update and refresh the page. The changes will automatically occur.
- After the successful setup of the pipeline, create a self-assessment about this Module.
- Now, post the link (URL) of self-assessment as a reply to the ongoing module.
These steps might be kind of overwhelming if it is your first time. But do not worry, I will walk you through the steps in the next meeting. Also, the meeting video will be recorded and will be made available to you. In the meantime, if you are interested to learn more, this is a good resource.
Discourse Theme Development Guide
Please reply below for any sort of questions or clarifications.