Shulou(Shulou.com)06/03 Report--

Editor to share with you how to use Reveal.js and Git to create web pages, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Seminar slides created through this simple workflow can be viewed consistently on any browser, device, and platform.

Whether you are a learner or a teacher, you may realize the value of a webinar workshop that uses slide shows to spread knowledge. If you've ever come across such a page-by-page, chapter-by-chapter tutorial, you might wonder how hard it is to create such a site.

Well, let me show you here how easy it is to generate such tutorials using a fully automated process.

Introduction

When I started to put the learning content online, the experience was not very good. What I want is something repeatable, consistent, and easy to maintain, because my content will change with the development of the technology I teach.

I've tried many delivery models, from low-level code generators like Asciidoctor to placing tutorials in a single PDF file. None of them satisfy me. When I hold live seminars, I like to use slide shows, so I wonder if I can do the same for my own online, self-paced seminar experience.

After some digging, I laid the foundation for creating a painless seminar website. I was already using a presentation generation framework, which was helpful to me because it produced a website-friendly format (HTML).

Set up

Here are the basic components required for this project.

The idea of the seminar (this is your problem, I can't help you)

Reveal.js for seminar slides

GitLab project warehouse

Your usual HTML code editor

Web browser

Install Git on your machine

If the list looks daunting, there is a quick way to get started without pulling everything together one by one. You can use my template project to provide you with introductory tutorials for slides and project settings.

This article assumes that you are familiar with Git and hosting projects on Git platforms such as GitLab. If you need guidance or tutorials, please check out our getting started series on Git.

First, clone the template project to the local machine.

$git clone https://gitlab.com/eschabell/beginners-guide-automated-workshops.git

Set up a new GitLab project for this, and import the template project as the initial import.

There are some important documents on the seminar website. In the root directory, you will find a file called. Gitlab-ci.yml, which acts as a trigger when you submit changes to the main branch (about to merge the pull request into the master branch). It triggers copying the entire contents of the slides directory to the website folder of the GitLab project.

I host it in my GitLab account called beginners-guide-automated-workshops. When it is deployed, you can view the contents of the slides directory in your browser by navigating to the following address:

Https://eschabell.gitlab.io/beginners-guide-automated-workshops

For your user account and project, URL is as follows:

Https://[YOUR_USERNAME].gitlab.io/[YOUR_PROJECT_NAME]

These are the basic materials you need to start creating content on your site. When you push the changes, they automatically generate an updated seminar website. Please note that the default template contains several sample slides, which will be your first seminar site after you complete your full check-in to the repository.

The result of the seminar template is a receive.js slide that can be run in any browser and automatically resized to allow almost anyone to watch it on any device.

How about creating a convenient and accessible seminar?

How does it work?

With this background information, you can start exploring the material for the seminar and start putting your content together. Everything you need can be found in the project's slides directory; this is where you create seminar slides in your browser using reveal.js.

The documents and directories you will use to make the seminar are:

Default.css file

Images directory

Index.html file

Open each file in your usual HTML/CSS editor and make the changes described below. It doesn't matter which editor you use, I prefer RubyMine IDE because it provides page previews in local browsers. This is very helpful for me to test the content before pushing it to the seminar website.

Default.css file

The file css/theme/default.css is a basic file where you will set important global settings for your seminar slides. The two main items worth noting are the default fonts and background pictures for all slides.

In default.css, take a look at the section marked GLOBAL STYLES. The current default font is listed on this line.

Font-family: "Red Hat Display", "Overpass", san-serif

If you are using a non-standard font type, you must import it on the following line (this is what the Overpass font type does):

@ import url ('SOME_URL')

Background is the default image for every slide you create. It is stored in the images directory (see below) and set in the following line (focusing on the image path).

Background: url ("… / … / images/backgrounds/basic.png")

To set a default background, simply point this line to the picture you want to use.

Images directory

As the name implies, the images directory is used to store the pictures you want to use on seminar slides. For example, I usually put screenshots showing the progress of the seminar theme on my personal slides.

For now, you just need to know that you need to store the background images in a subdirectory (backgrounds) and the images you plan to use in the slide show in the images directory.

Index.html file

Now that you've sorted out these two files, you can create slides in the HTML file the rest of the time, starting with index.html. In order for your seminar website to begin to take shape, please pay attention to the following three parts of this document.

The head section, where you can set the title, author, and description.

In the body section, you can find a single slide to design here.

You can define the contents of each slide in each section.

Start with the head section, because it's at the top. The template project has three placeholder lines for you to update.

INSERT-YOUR-TITLE-HERE

The title tag contains the text that appears in the browser tab when the file is opened. Please change it to something related to the title of your seminar (or some part of the seminar), but remember to be brief because the title space of the tab is limited. The description meta tag contains a short description of your workshop, while the author meta tag is that you should put your name (or the name of the workshop creator if you wrote it for someone else).

Now move on to the body section. You will notice that it is divided into many section tags. The beginning of the body contains a note indicating that you are creating slides for each open and closed label marked with section.

Next, create each of your slides, each wrapped in a section tag. This template includes some slides to help you get started. For example, here is the first slide.

Beginners guide to automated workshops Brought to you by, YOUR-NAME Here are notes: Welcome to the workshop!

This slide has two areas, separated by div tags. Separate the title from the author with a space.

If you have some knowledge of using HTML, you can try a variety of things to develop your seminar. It's really convenient to use a browser to preview the results. Some IDE provides local viewing of changes, but you can also open the index.html file to view your changes and then push them to the repository.

Once you are satisfied with your seminar, push your changes and wait for them to pass through the continuous integration pipeline. They will be hosted like template projects in the

The above is all the content of the article "how to use Reveal.js and Git to create a web page". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.