Skip to content

fslurrehman/cb

Repository files navigation

Welcome to the source code of http://civil.builders website.

You can edit it to suit your needs. It is made in hugo static page engine with academic theme. Download this repo and use hugo to update this site as per your requirements or to continue this site from your repo and domain name. Following are some guidelines for publishing hugo sites:

Hugo

Steps for windows:

  1. Install scoop in powershell
  2. Then install hugo as using: scoop install hugo
  3. To update hugo: scoop update hugo

Github commands for hugo

  1. First there is need to create github repo
  2. Upload your hugo website to that repo
  3. Then better to create github branch named gh-pages.
  4. Then create site page from settings of the branch. i.e., name.github.io/reponame
  5. Optionally you can assign domain name by adding a file CNAME in the gh-pages, which contains domain name e.g., example.com.
  6. Goto your DNS Manager page and change A record to 192.30.252.153 and www to

Update public folder of website

cd .. hugo server del public/* hugo cd public

git add --all
git commit -m "toc test check" 
git push origin gh-pages`

You can use below steps for publishing on github is taken from https://discourse.gohugo.io/t/simple-deployment-to-gh-pages/5003:

To remove previous publication

rm -rf public
mkdir public

To clone gh-pages branch from the local repo into a repo located within "public" git clone .git --branch gh-pages public

To generate site: hugo

To commit the changes in the clone and push them back to the local gh-pages branch:
cd public && git add --all && git commit -m "Publishing to gh-pages" && git push origin gh-pages

To publish: git push upstream gh-pages

Adding feature of user comments by using github comments:

Following steps are taken from http://donw.io/post/github-comments/

  1. Add in the begining of your hugo post: ghcommentid = 1
  2. Backup existing comments.html and add comments.html to layouts/partials/ inside theme folder. You can copy the required file from mentioned path. Following is the code of comments.html:
{{ if $.Params.ghcommentid}}
<section id="gh-comments">
 <br/><br/>
 <h6>COMMENTS</h6>
 <div id="gh-comments-list"></div>
 
 <a href="javascript:void(0)" id="gh-load-comments" class="btn btn-outline-primary px-3 py-2" style="comments">Load more comments</a>
</section>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!--script type="text/javascript" src="{{ .Site.BaseURL }}js/github-comments.js"></script> -->
<script type="text/javascript" src="{{ .Site.BaseURL }}js/github-comments.js"></script>
<script type="text/javascript">
DoGithubComments("fslurrehman/BIM-Lectures",{{ $.Params.ghcommentid }});
//DoGithubComments("dwilliamson/donw.io",{{ $.Params.ghcommentid }});


</script>
{{else}}
{{end}}
  1. Add github-comments.js to static/js folder inside theme folder. You can copy the required file from mentioned path. Following is the code for github-comments.js:
/*Function def for more comment pages*/
 function ParseLinkHeader(link)
 {
 	if (link !=null)
 		var entries = link.split(",");
 		var links = { };
 		for (var i in entries)
 		{
 			var entry = entries[i];
 			var link = { };
 			link.name = entry.match(/rel=\"([^\"]*)/)[1];
 			link.url = entry.match(/<([^>]*)/)[1];
 			link.page = entry.match(/page=(\d+).*$/)[1];
 			links[link.name] = link;
 		}			
 	return links;
 }
 /*end of function def for more comment pages*/
 
function ShowComments(repo_name, comment_id, page_id)
{
 $(document).ready(function ()
 {
     $.getJSON("https://api.github.com/repos/" + repo_name + "/issues/" + comment_id, function(data) {
         NbComments = data.comments;
     });
 
 
 $.ajax({
     url: "https://api.github.com/repos/" + repo_name + "/issues/" + comment_id + "/comments" + "?page=" + page_id,
     headers: {Accept: "application/vnd.github.v3.html+json"},
     dataType: "json",
     success: function(comments, textStatus, jqXHR) {
 		
 		// Add post button to first page

         if (1 == page_id) {
             // post button 
 			var url = "https://github.com/" + repo_name + "/issues/" + comment_id + "#new_comment_field";
 			$("#gh-comments-list").append("<a href='" + url + "#new_comment_field' rel='nofollow' class='btn btn-outline-primary px-3 py-2'>Post your comment</a>");

             //$("#gh-comments-list").append("<form action='" + url + "' rel='nofollow'> <input type='submit' value='Post a comment on Github' /> </form>");
             $("#gh-comments-list").append("<br />"); //adding break for vertical space
 			$("#gh-comments-list").append("<br />"); //adding break for vertical space
 			
             
 		}
         // Individual comments
         $.each(comments, function(i, comment) {

             var date = new Date(comment.created_at);

             var t = "<div id='gh-comment'>";
             t += "<img src='" + comment.user.avatar_url + "' width='24px'>";
             t += "<b><a href='" + comment.user.html_url + "'>" + comment.user.login + "</a></b>";
             t += " posted at ";
             t += "<em>" + date.toUTCString() + "</em>";
             t += "<div id='gh-comment-hr'></div>";
             t += comment.body_html;
             t += "</div>";
 			//t += "<hr>";
             $("#gh-comments-list").append(t);
         });
 		// Setup comments button if there are more pages to display
         var links = ParseLinkHeader(jqXHR.getResponseHeader("Link"));
         if ("next" in links)
         {
             $("#gh-load-comments").attr("onclick", "ShowComments(\""+repo_name+"\"," + comment_id + "," + (page_id + 1) + ");");
             $("#gh-load-comments").show();
         }
         else
         {
            $("#gh-load-comments").hide();
         }			
 		
     },
     error: function() {
         $("#gh-comments-list").append("Comments are not open for this post yet.");
     }
 });
});
}

function DoGithubComments(repo_name, comment_id)
{
 $(document).ready(function ()
 {
     ShowComments(repo_name, comment_id, 1);
 });
}
  1. Add {{ partial "comments.html" . }} before tag in layouts/partials/docs_layout.html.
  2. Add css styles for comments in css file of the theme. It shall contain following code:
#gh-comments {
text-align: center;
}

#gh-comment {
text-align: left;
border:1px solid #b3b3b3;
margin:2.5em 0;
padding:10px;
}

#gh-comment-hr {
border-top: inset 1px white;
margin: 8px 0px;
}

#gh-comment p {
margin:0px;
}

#gh-comment img {
display: inline;
vertical-align: middle;
margin: 2px 10px 2px 2px;
}

Licence: GNU/GPL V2.0