GitHub Pages for the site on March 8
What is HTML, CSS, JavaScript and Bootstrap framework is difficult to explain to a person who is far from IT. And what if you need a website on a free hosting, without being tied to the online construct of this particular hosting?
What do you think, is it really possible to teach a girl to update her site on GitHub Pages for International Women's Day ?! I'll tell you how I managed it using the site generator, which is available on Github and written in Java + FreeMarker, besides trying to automate the publication of content in the git repository.
The other day I helped to fulfill the dream of a textile designer in the interior of my website, while I have a lot of free time. She herself tried to create a layout using the designer on Wix. But the first Vicks site came out lumpy and did not appear normally on mobile phones ... In addition, it is better not to become attached to a particular hosting.
')
The last thing I put on my own in HTML was the artist's site while studying at the university and then tabular layout was in fashion. Web development is not my bread. And now mobile browsers and block layout are everywhere. The young lady just wanted to make a simple business card site, so the scripts on the server are not needed. It would be ideal to update the photos and edit sections of this web resource with zero knowledge of HTML and without my help.
If you put a CMS - content management system, the hosting of the site will be more expensive and will have to spend time configuring, templates and security. Too complicated for a static site. It seemed to me all this is very similar to the task of generating a site from a template. I did not know where to find these days hosting for a site without ads. After asking from friends, looking at the options and reading notes on the network, I came to the conclusion that GitHub Pages is ideal. Free, versioned and supports the use of your domain name for the site.
The jekyll templating engine is ideal for GitHub Pages, but there was no time to deal with it and setting up Ruby and jekyll gem on the designer’s computer. I will play with jekyll another time, as I will need a website for my project on GitHub.
For any javista, the association with templates is FreeMarker, which is familiar to many template engines. I needed to quickly develop a website and a generator, considering that Java is my usual tool in work. Comparing FreeMarker with Velocity, the first is still alive and looks more functional.
Begin by creating an account for the designer on GitHub:
Then they switched to design and layout. Bootstrap Carousel seemed like a great solution for displaying images, since the main content of web pages will be portfolio photos and pages will be viewed on mobile devices.
Once connected to the Bootstrap page, the Panel element and icons for navigation / contacts will be useful. For me, layout was the most tedious step in creating the site. The second place in terms of complexity was resizing, color correction and framing of a large number of photos for a portfolio of works.
The next step is to turn the layout into a generator template. In the FreeMarker template, iterations on the collection of objects are done using the directive <#list product as prodItem> ... </ # list>, and the conditions using <#if prodItem? Is_first> ... </ # if>. This is all that is used in these generator templates.
For the basis of the data format for data storage, I chose XML markup. The structure was quickly identified, based on the layout:
From the XML file generated XSD schema in IntelliJ Idea Community Edition.
JAXB annotated classes for use in a template are dynamically generated from Maven using the jaxb2-maven-plugin. When building a project, these classes are placed in the directory target / generated-sources / jaxb.
An example of a fragment of a FreeMarker template for displaying all images of a portfolio for a specific category:
Here is an example of the data on which the page is generated:
Index.html generates a table of contents based on all the tags <product ...> listed in site.xml using a template .
As a “glue” for templates, the main work is performed by the java class src / main / java / Site.java and maven build script : the images from the src / main / resources / img directory are copied to target / site, JAXB classes are generated from the XML schema annotations and runs the program in java using the exec-maven-plugin, which with the help of FreeMarker and data from site.xml generates the site. For the jaxb2-maven-plugin, it is important that the xjc from the JDK be available in one of the paths in the PATH environment variable.
To prevent the young lady from installing anything other than the JDK, he added mvn-classloader-1.8.jar to the project , which for the first time loads the maven-embedder from the central maven repository and starts building the project and generating the site with “clean package” and “ scm-publish: publish-scm ”for publishing a site on GitHub Pages. Starts site generation build.cmd for systems on windows and build.sh for linux. This greatly simplifies the build project and is very similar to the Gradle Wrapper / Maven Wrapper. The library for maven requires only a JVM and an internet connection with access to a central repository. We will not consider the case of isolated networks here, but even in this case, the settings of mirrors and proxies from ~ / .m2 / settings.xml work. About all the magic of this library recently told in "Modularization in JavaSE without OSGI and Jigsaw . "
A few words about the learning process. It was difficult for me to talk about the version control system and commands in the console for Git. Not that this is impracticable, but it doesn’t scare the programmer. That she was not mistaken in the process of publishing the site, I began to look for an opportunity to automate the entire process. To generate and publish the site could be in one click. Searching how easy it is to publish a site on github, I discovered the maven-scm-publish-plugin plugin. Added it to the maven build and configured scmpublish.pubScmUrl to the repository address.
Take a break from technology and remember a women's holiday. Less and less you can see modern girls sewing and handicrafts. And then there was the opportunity to observe the work of the designer and how she sewed:
I learned about a new area of ​​textile design in the interior. And did not even think that there are so many types of curtains, fabrics and curtain rods.
Even before the story with the site, I watched as she was making a birthday present for a friend with her mother. These were funny pillow covers with a kitten and a fish, with a dog.
Ehh, it's a pity that I have not been given handmade gifts for so long, I even envied a little.
It was interesting to learn about the eaves with electric drive for the “smart home” and about the experience of their installation. I want to experiment with electric curtains, fasten them to my controller based on the STM32 and automate the opening of curtains using the light sensor or control the curtains remotely from the phone. Deal with the protocol, connect your controller beautifully and without the blue electrical tape! But it will be, apparently, after I deal with the jekyll templates. Before that, I saw similar automatic roller blinds only in the Nordstar Tower.
How to update the content ... First of all, you need to execute the command
or download the project zip file from github:
The designer copies the processed images for the portfolio to the src / main / resources / img directory and adds an entry to the <product ...> section of the src / main / resources / site.xml file . After that, it launches the build.cmd script using a shortcut, which creates a site from the data by templates and publishes it on GitHub Pages to the nadinbox89.imtqy.com repository. With a slight delay after git push, the site version is updated to the same address as the GitHub repository name - nadinbox89.imtqy.com . If you use a domain record in CNAME in the repository, it will automatically redirect to this address. After updating the site, a commit from the posting plugin appears in the repository named nadinbox89.imtqy.com:
It would be nice to hide the work with XML from it completely, but there is no desire to write a UI for the generator yet.
Business card website decorated with a domain name. You can take a domain from almost any registrar for a couple of hundred rubles. After that, you need to add a CNAME file with a domain name to the root of your github site repository. Well, if the domain registrar has free DNS servers. They need to be configured for GitHub Pages as follows:
Where 192.30.252.153, 192.30.252.154 are the IP addresses of the githab. About setting up a domain name is well described on stackoverflow and in the help of GitHub . After that, I checked it with mobile-friendly service and, in general, the site does not work well with mobile browsers.
I hope that my participation in the creation of the site is over and the support will be in the same mode as in
GitHub Pages is great for hosting a simple static business card site and all costs are time spent on layout and buying a domain name for a couple of hundred rubles. The algorithm is not complicated and is described in this article:
It is possible to generate html using the template jekyll built into GitHub, and using the java program and templates on FreeMarker, which with my experience seemed easier. It is also convenient to publish the site on GitHub immediately from the maven assembly using the maven-scm-publish-plugin. You only need to configure the login / password in the script so that the plugin for publishing can execute git push. My gift for March 8 was a success!
What do you think, is it really possible to teach a girl to update her site on GitHub Pages for International Women's Day ?! I'll tell you how I managed it using the site generator, which is available on Github and written in Java + FreeMarker, besides trying to automate the publication of content in the git repository.
The other day I helped to fulfill the dream of a textile designer in the interior of my website, while I have a lot of free time. She herself tried to create a layout using the designer on Wix. But the first Vicks site came out lumpy and did not appear normally on mobile phones ... In addition, it is better not to become attached to a particular hosting.
')
The last thing I put on my own in HTML was the artist's site while studying at the university and then tabular layout was in fashion. Web development is not my bread. And now mobile browsers and block layout are everywhere. The young lady just wanted to make a simple business card site, so the scripts on the server are not needed. It would be ideal to update the photos and edit sections of this web resource with zero knowledge of HTML and without my help.
If you put a CMS - content management system, the hosting of the site will be more expensive and will have to spend time configuring, templates and security. Too complicated for a static site. It seemed to me all this is very similar to the task of generating a site from a template. I did not know where to find these days hosting for a site without ads. After asking from friends, looking at the options and reading notes on the network, I came to the conclusion that GitHub Pages is ideal. Free, versioned and supports the use of your domain name for the site.
The jekyll templating engine is ideal for GitHub Pages, but there was no time to deal with it and setting up Ruby and jekyll gem on the designer’s computer. I will play with jekyll another time, as I will need a website for my project on GitHub.
For any javista, the association with templates is FreeMarker, which is familiar to many template engines. I needed to quickly develop a website and a generator, considering that Java is my usual tool in work. Comparing FreeMarker with Velocity, the first is still alive and looks more functional.
Begin by creating an account for the designer on GitHub:
Then they switched to design and layout. Bootstrap Carousel seemed like a great solution for displaying images, since the main content of web pages will be portfolio photos and pages will be viewed on mobile devices.
Once connected to the Bootstrap page, the Panel element and icons for navigation / contacts will be useful. For me, layout was the most tedious step in creating the site. The second place in terms of complexity was resizing, color correction and framing of a large number of photos for a portfolio of works.
The next step is to turn the layout into a generator template. In the FreeMarker template, iterations on the collection of objects are done using the directive <#list product as prodItem> ... </ # list>, and the conditions using <#if prodItem? Is_first> ... </ # if>. This is all that is used in these generator templates.
For the basis of the data format for data storage, I chose XML markup. The structure was quickly identified, based on the layout:
<site> <text>.......</text> <product id="drapery" background-img="drapery.jpg" title-img="drapery-main.jpg"> <title>, </title> <description> ...</description> <image img="drapery/1.jpg"/> ... <image img="drapery/37.jpg"/> </product> ... <product .../> </site> From the XML file generated XSD schema in IntelliJ Idea Community Edition.
JAXB annotated classes for use in a template are dynamically generated from Maven using the jaxb2-maven-plugin. When building a project, these classes are placed in the directory target / generated-sources / jaxb.
An example of a fragment of a FreeMarker template for displaying all images of a portfolio for a specific category:
<#list image as imageInfo> <div class="item<#if imageInfo?is_first> active</#if>"> <img src="img/${imageInfo.img}" class="img-responsive center-block"> <div class="carousel-caption"> <#if imageInfo.title??> <h3>${imageInfo.title}</h3> <p></p> </#if> </div> </div> </#list> Here is an example of the data on which the page is generated:
<product id="pillow" background-img="pillow.jpg" title-img="pillow-main.jpg"> <title>, </title> <shortDescription> , , </shortDescription> <description> - , , . , , , .</description> <image img="pillow/1.jpg"/> <image img="pillow/2.jpg"/> <image img="pillow/3.jpg"/> <image img="pillow/4.jpg"/> <image img="pillow/5.jpg"/> <image img="pillow/6.jpg"/> <image img="pillow/7.jpg"/> <image img="pillow/8.jpg"/> <image img="pillow/9.jpg"/> <image img="pillow/10.jpg"/> <image img="pillow/11.jpg"/> <image img="pillow/12.jpg"/> <image img="pillow/13.jpg"/> <image img="pillow/14.jpg"/> </product> Index.html generates a table of contents based on all the tags <product ...> listed in site.xml using a template .
As a “glue” for templates, the main work is performed by the java class src / main / java / Site.java and maven build script : the images from the src / main / resources / img directory are copied to target / site, JAXB classes are generated from the XML schema annotations and runs the program in java using the exec-maven-plugin, which with the help of FreeMarker and data from site.xml generates the site. For the jaxb2-maven-plugin, it is important that the xjc from the JDK be available in one of the paths in the PATH environment variable.
public class Site { public static void main(String[] args) throws Exception { File targetDirectory = getTargetDirectory(); SiteType siteModel = readSiteModel(); Configuration cfg = getTemplateConfiguration(); generateIndex(targetDirectory, siteModel, cfg); siteModel.getProduct().stream().forEach(product -> generateProduct(targetDirectory, cfg, product)); } private static void generateIndex(File targetDirectory, SiteType siteModel, Configuration cfg) { try(Writer out = new FileWriter(new File(targetDirectory, "index.html"))) { Template template = cfg.getTemplate("index-template.html"); template.process(siteModel, out); } catch (Exception e) { throw new IllegalArgumentException(e); } } private static void generateProduct(File targetDirectory, Configuration cfg, ProductType product) { try(Writer out = new FileWriter(new File(targetDirectory, product.getId() + ".html"))) { Template prodTemplate = cfg.getTemplate("product-template.html"); prodTemplate.process(product, out); } catch (Exception e) { throw new IllegalArgumentException(e); } } ... } To prevent the young lady from installing anything other than the JDK, he added mvn-classloader-1.8.jar to the project , which for the first time loads the maven-embedder from the central maven repository and starts building the project and generating the site with “clean package” and “ scm-publish: publish-scm ”for publishing a site on GitHub Pages. Starts site generation build.cmd for systems on windows and build.sh for linux. This greatly simplifies the build project and is very similar to the Gradle Wrapper / Maven Wrapper. The library for maven requires only a JVM and an internet connection with access to a central repository. We will not consider the case of isolated networks here, but even in this case, the settings of mirrors and proxies from ~ / .m2 / settings.xml work. About all the magic of this library recently told in "Modularization in JavaSE without OSGI and Jigsaw . "
A few words about the learning process. It was difficult for me to talk about the version control system and commands in the console for Git. Not that this is impracticable, but it doesn’t scare the programmer. That she was not mistaken in the process of publishing the site, I began to look for an opportunity to automate the entire process. To generate and publish the site could be in one click. Searching how easy it is to publish a site on github, I discovered the maven-scm-publish-plugin plugin. Added it to the maven build and configured scmpublish.pubScmUrl to the repository address.
Take a break from technology and remember a women's holiday. Less and less you can see modern girls sewing and handicrafts. And then there was the opportunity to observe the work of the designer and how she sewed:
I learned about a new area of ​​textile design in the interior. And did not even think that there are so many types of curtains, fabrics and curtain rods.
Even before the story with the site, I watched as she was making a birthday present for a friend with her mother. These were funny pillow covers with a kitten and a fish, with a dog.
Ehh, it's a pity that I have not been given handmade gifts for so long, I even envied a little.
It was interesting to learn about the eaves with electric drive for the “smart home” and about the experience of their installation. I want to experiment with electric curtains, fasten them to my controller based on the STM32 and automate the opening of curtains using the light sensor or control the curtains remotely from the phone. Deal with the protocol, connect your controller beautifully and without the blue electrical tape! But it will be, apparently, after I deal with the jekyll templates. Before that, I saw similar automatic roller blinds only in the Nordstar Tower.
How to update the content ... First of all, you need to execute the command
git clone https://github.com/nadinbox89/site.git or download the project zip file from github:
The designer copies the processed images for the portfolio to the src / main / resources / img directory and adds an entry to the <product ...> section of the src / main / resources / site.xml file . After that, it launches the build.cmd script using a shortcut, which creates a site from the data by templates and publishes it on GitHub Pages to the nadinbox89.imtqy.com repository. With a slight delay after git push, the site version is updated to the same address as the GitHub repository name - nadinbox89.imtqy.com . If you use a domain record in CNAME in the repository, it will automatically redirect to this address. After updating the site, a commit from the posting plugin appears in the repository named nadinbox89.imtqy.com:
It would be nice to hide the work with XML from it completely, but there is no desire to write a UI for the generator yet.
Business card website decorated with a domain name. You can take a domain from almost any registrar for a couple of hundred rubles. After that, you need to add a CNAME file with a domain name to the root of your github site repository. Well, if the domain registrar has free DNS servers. They need to be configured for GitHub Pages as follows:
@ A 192.30.252.153
@ A 192.30.252.154
www CNAME * your_github_account * .imtqy.com.
Where 192.30.252.153, 192.30.252.154 are the IP addresses of the githab. About setting up a domain name is well described on stackoverflow and in the help of GitHub . After that, I checked it with mobile-friendly service and, in general, the site does not work well with mobile browsers.
I hope that my participation in the creation of the site is over and the support will be in the same mode as in
good old video
Conclusion
GitHub Pages is great for hosting a simple static business card site and all costs are time spent on layout and buying a domain name for a couple of hundred rubles. The algorithm is not complicated and is described in this article:
- Register an account on github
- Creating a repository * your_github_account * .imtqy.com
- Saving statics (html, css, images) to the repository * your_github_account * .imtqy.com
- Domain registration and the creation of DNS server records pointing to the address of 3 points
- Add the CNAME file to the repository root with the name of your domain
It is possible to generate html using the template jekyll built into GitHub, and using the java program and templates on FreeMarker, which with my experience seemed easier. It is also convenient to publish the site on GitHub immediately from the maven assembly using the maven-scm-publish-plugin. You only need to configure the login / password in the script so that the plugin for publishing can execute git push. My gift for March 8 was a success!
Source: https://habr.com/ru/post/323430/
All Articles