Hexo+github

You can host a static website on GitHub pages:

Free
Deploy from git

My GitHub page: https://pandatt66.github.io

To get started, you’ll need:

GitHub Account Setup and Configuration
Windows:intall git
Linux (Ubuntu, Debian): sudo apt-get install git-core
Install Node.js
Basic knowledge of HTML, CSS…
Terminal command line

1. Create a website on github page

Follow the instructions and you’ll get your website: https://username.github.io.

GitHub Pages

2. HEXO

Hexo is a fast, simple and powerful blog framework. You write posts in Markdown (or other markup languages) and Hexo generates static files with a beautiful theme in seconds.
Install
For Windows, you can use Git BASH.
1. npm install hexo-cli -g
2. hexo init blog
3. cd blog
4. npm install
5. hexo server

3. Customize Hexo based on themes:

Themes
My choice:
hexo-theme-matery
Save this theme under your main folder”blog”-“themes\hexo-theme-matery”

Gallery

Use picture hosting service
Github + PicGO: https://blog.csdn.net/sunhwee/article/details/100109956
Add directory under “blog/sources”:create a folder “galleries” for pictures. Then create ‘index.md’ with contents:(main site)
```
---
title: galleries
layout: "galleries"
---                     
```

Add sources/_data/galleries.json(main site)

[
 {
   "name": "Nature",
   "cover": "nature1.jpg",
   "description": "Nature-my photography",
   "photos": [
     "nature1.jpg",
     "nature2.jpg",
     "nature3.jpg"
   ]
 },
 {
   "name": "Drawings",
   "cover": "art1.jpg",
   "description": "My artwork",
   "photos": [
     "art1.jpg",
     "art2.jpg",
     "art3.jpg",
     "art4.jpg"
   ]
 },
 {
   "name": "Life",
   "cover": "m1.jpg",
   "description": "people,food",
   "photos": [
     "m1.jpg",
     "m2.jpg",
     "m3.jpg"
   ]
 }
]

Modify configuration file: “_config.yml”. Add the following to menu.(theme )
Galleries:
```
  url: /galleries
  icon: fa-images
```

Modify layout/_partial/navigation.ejs and layout/_partial/mobile-nav.ejs (theme)

menuMap.set(“Galleries”, “相册”);

Create source/css/gallery.css (theme)

   .gallery-wrapper{
   padding-top: 30px;
   }
   .gallery-wrapper .gallery-box{
   padding: 5px !important;
   }

   .gallery-wrapper .gallery-item {
     display: block;
     overflow: hidden;
     background-color: #fff;
     padding: 5px;
     padding-bottom: 0;
     position: relative;
     -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
     -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
   }

   .gallery-cover-box{
     width: 100%;
     padding-top: 60%;
     text-align: center;
     overflow: hidden;
     position: relative;
     background: center center no-repeat;
     -webkit-background-size: cover;
     background-size: cover;
   }

   .gallery-cover-box .gallery-cover-img {
     display: inline-block;
     width: 100%;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
   }
   .gallery-item .gallery-name{
     font-size: 14px;
     line-height: 24px;
     text-align: center;
     color: #666;
     margin: 0;
   }

   .waterfall {
     column-count: 3;
     column-gap: 1em;
   }
   .photo-wrapper{
     padding-top: 20px;
   }
   .photo-item {
     display: block;
     padding: 10px;
     padding-bottom: 0;
     margin-bottom: 14px;
     font-size: 0;
     -moz-page-break-inside: avoid;
     -webkit-column-break-inside: avoid;
     break-inside: avoid;
     background: white;
     -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
     -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
   }
   .photo-item img {
     width: 100%;
   }
   .photo-item .photo-name{
     font-size: 14px;
     line-height: 30px;
     text-align: center;
     margin-top: 10px;
     margin-bottom: 10px;
     border-top: 1px solid #dddddd;
   }

   /*for mobile screen*/
   @media only screen and (max-width: 601px) {
   .waterfall {
     column-count: 2;
     column-gap: 1em;
   }
 }

layout –> create galleries.ejs (theme)
Note:In the following you need to change url. It should be like this if use GitHub hosting your pictures:
“https://raw.githubusercontent.com/[username]/[yourfolder]",if you don’t use raw**, the image won’t show up.

     <link rel="stylesheet" href="/css/gallery.css">

     <%- partial('_partial/bg-cover') %>

     <main class="content">
         <div class="container">
             <% if (site.data && site.data.galleries) { %>
             <% var galleries = site.data.galleries; %>
             <div class="gallery-wrapper row">
                 <% for (var i = 0, len = galleries.length; i < len; i++) { %>
                 <% var gallery = galleries[i]; %>
                 <div class="col s6 m4 l4 xl3 gallery-box">
                     <a href="./<%- gallery.name %>" class="gallery-item" data-aos="zoom-in-up">
                         <div class="gallery-cover-box" style="background-image: url(https://raw.githubusercontent.com/pandatt66/Pictures/master/img/<%- gallery.cover%>)">
                             <!--<img src="http://puxxml5fz.bkt.clouddn.com/<%- gallery.cover %>" alt="img" class="gallery-cover-img">-->
                         </div>
                         <p class="gallery-name">
                             <%- gallery.name %>
                         </p>
                     </a>
                 </div>
                 <% } %>
             </div>
             <% } %>
         </div>
 </main>

layout –> create gallery.ejs (theme)
Note:Here we used jquery fancybox and justifiedGaller. You can download from my site or view page source and save it.

source/libs/fancybox:
jquery.fancybox.min.css
jquery.fancybox.min.js
source/libs/justifiedGallery:
jquery.justifiedGallery.min.js
justifiedGallery.min.css

 <link rel="stylesheet" href="/css/gallery.css">
 <link type="text/css" href="/libs/fancybox/jquery.fancybox.min.css" rel="stylesheet">
 <link type="text/css" href="/libs/justifiedGallery/justifiedGallery.min.css" rel="stylesheet">

 <%- partial('_partial/post-cover') %>
 <%
 let galleries = [];
 if (site.data && site.data.galleries) {
     galleries = site.data.galleries;
 }
 var pageTitle = page.title;
 function getCurrentGallery(galleries, pageTitle) {
     for (let i = 0; i < galleries.length; i++) {
         if (galleries[i]['name'] == pageTitle) {
             return galleries[i];
         }
     }
 }
 var currentGallery = getCurrentGallery(galleries, pageTitle)

 var photos = currentGallery.photos;

 let imageStr = ''

 for (var i = 0, len = photos.length; i < len; i++) {
     var photo = photos[i];

     imageStr += "<a href=\"https://raw.githubusercontent.com/pandatt66/Pictures/master/img/" + photo + "\"" +
             "     class=\"photo-item\" rel=\"example_group\"" +
             "     data-fancybox=\"images\">" +
             "      <img src=\"https://raw.githubusercontent.com/pandatt66/Pictures/master/img/" + photo + "\"" +
             "       alt=" + photo + ">\n" +
             "    </a>"

 }
 %>

 <div class="container">
     <div class="photo-wrapper">
         <div class="waterfall" id="mygallery">
             <%- imageStr %>

         </div>
     </div>
 </div>
 <script src="/libs/fancybox/fancybox.min.js"></script>
 <script src="/libs/justifiedGallery/justifiedGallery.min.js"></script>
 <script>

   $("a[rel=example_group]").fancybox();
   $("#mygallery").justifiedGallery({margins: 5, rowHeight: 150});

 </script>

ref: https://liyangzone.com/

Xinjie

https://pandatt66.github.io/2019/10/31/2Computer/hexo+github/