So this is my first post on my blob. I feel sorry for you if you are reading this as either you have delved into the depths of the interwebs or you are an acquaintance of mine who was obliged to click on the link due to my aggressive publicising the shit out of this utter crap of a blob.
Disclaimer: The code sample gems I provide might not be the best practices in the programming jargon. Feel free to comment if you can suggest an improvement.
And sorry for using disqus.
You will be forgiven if you think that this site dated 10 years back, when there was no Ruby on Rails, Angular and all the other fancy stuff. Still static pages are immortal. Especially if you are are in no position to host/buy a server and stick to GitHub Pages and hosting provided by your University.
With minimal experience in webdesign, I had to pick up a CMS which requires little styling .
I would have loved to give a shot with Angular and Node
as I have worked on MEAN Stack(check it out if you ever feel like developing a webapp) as an intern but I don't have the resources to set up a
node server. So for now, static pages ftw!
After hours of frantic googling, I have decided to go on with JekyllBootstrap for my attempt of a blog, which I will proceed to call blob.
It was build to be compliant with GitHub Pages and it was up and running before I knew what I was upto.
$ git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com
$ cd USERNAME.github.com
$ git remote set-url origin git@github.com:USERNAME/USERNAME.github.com.git
$ git push origin master
If only it was that simple. Getting it onto a github page was fine but to use it for my University webpage, man it was a pain in the ass. My webpage is http://cse.iitkgp.ac.in/~skakarla , meaning a subdirectory ~skakarla on the host http://cse.iitkgp.ac.in. No matter what I tried, I couldn't get jekyll to configure to host on a subdirectory as it was using rootish links using "/blah". I went through numerous github issues, stackoverflow questions and nothing worked. So I took the ugly and easy way out and got it working with a combination of find and sed.
#this adds the line <base href="http://cse.iitkgp.ac.in/~skakarla"> to the top of every line ending with .html.
#Rest of the gibberish is delimiting the symbols
$ find <foldername> -type f -name '*html' -printf '%p ' | xargs sed -i '1s/^/<base href=\"http:\/\/cse\.iitkgp\.ac\.in\/~skakarla\/\">\n /'
#This replaces every instance of "/ with ". Because jekyll used root to specify links
#And as I was hosting on a subfolder, everything was screwed
$ find <foldername> -type f -name '*html' -printf '%p ' | xargs sed -i 's/\"\//\"/g'
This might not be the right way to do things but it sure worked. Feel free to point out any sloth that was dropped on the head as a baby retardation levels in my code.
In the end I didn't use JekyllBootstrap at all but it's an awesome setup to startoff with. I used plain jekyll and forked off some bloke's theme I found on reddit which was just budding. If you feel like using it, don't. I had to change lots of stuff to get it to work. I would advise to pick any of the popular themes.
You might want to learn a bit about markdown before you delve into jekyll. If you use stackoverflow regularly, you must be acquainted with the basics of markdown by now. I hope you are not the kind who just use it without contributing. Instead of browsing 9gag all day, go over there and help a poor soul or two.
What I found difficult was changing the frontend stuff. I am no good at frontend webdevelopment and it took a lot to get the things right, so I was constantly using themes on the net instead of creating a custom fork off a base theme.
The Script
So I got the gig running for the github pages and my University webpage but I had to run those commands before pushing to the University webpage. And I had to maintain two copies of the generated site. I had to push it to the repo to update the github page(if you ever run out of retarded commit messages, help yourself) and use ftp to put it on the University page. I got fed up and have written a tiny shell script to do all these things with a single command and not even a password prompt for the authentication with the host.
This script resides in the jekyll source folder. The source folder, githubrep folder, uni webpagefolder and mount dir are all on the same level in the filesystem.
1 jekyll build -d ../<githubrepo folder>#Put the generated site
2 jekyll build -d ../<uni webpagefolder>#Put the generated site
3 find <uni webpagefolder> -type f -name '*html' -printf '%p ' | xargs sed -i '1s/^/<base href=\"http:\/\/cse\.iitkgp\.ac\.in\/~skakarla\/\">\n /'
4 find <uni webpagefolder> -type f -name '*html' -printf '%p ' | xargs sed -i 's/\"\//\"/g'
5 find <uni webpagefolder> -type f -name '*html' -printf '%p ' | xargs sed -i "s/'\//'/g"
6 cd ../<githubrepo folder>
7 git add -A #staging the files
8 git commit -m "$1" #Took the commit message as an argument to the script
9 git push origin master #pushing it to github
10 cd ..
11 rm -rf <mount dir>/* #Deleting the old stuff from the mount folder
12 #Now comes the fancy stuff. I mount my webpage host folder using sshfs on the <mount dir> which is a local folder.
13 #This folder should always be empty before mounting
14 #The echo is to give the password to the password_stdin. I know it's bad to store the password as plain text in a file. So spare me the vile.
15 echo <your smartass password here> | sshfs skakarla@cse.iitkgp.ac.in:/public_html <mount dir> -o workaround=rename -o password_stdin
16 #Here onwards changes in <mount dir> get reflected on the actual hosting folder in the server.
17 rm -rf <mount dir>/* #Deleting the old stuff from server
18 cp -rf <uni webpage folder>/* <mount dir>/ #Copying the new stuff into the server
19 sleep 5 #This is put in to allow the copy to complete I am correct.
20 #Without the sleep the script was trying to unmount without waiting for the copying to finish
21 fusermount -u <mount dir> #Unmount
I was fed up of giving the github credentials.
$ git config credential.helper store
#This will store your git repo's username and password
#and never asks for the credentials again
It is not safe but it was what I wanted.
So with a simple command I get my blob to update on the github pages and University webpage. It's magic.
$ ./build.sh 'added new post - how not to write a blob post'
#The string is the commit message for the github repo if you weren't paying attention.
Plugin Compatibility on Github Pages
One thing to keep in mind is that github pages allow you to push both the jekyll source where the posts are in markdown (it will use the source to produce the final site using it's jekyll engine, but it is pretty outdated) and the final site itself (all the html and stuff). I advise you to use final site - the _site folder as the plugins (like pygments for code highlighting) don't work when you push the source.
I used the master branch for pushing the generated sited and created another branch for the source.
Again I would like to reiterate that this might not be the right way to do stuff. But the reason I put it was it freaking works. Maybe the code quality will improve over time ( which I am obliged to say)
So hosting the same site effectively on two urls is retarded as you can always use redirection. But I was willing to solve the use case using a different approach (atleast that's what I told myself).
Disqus comments across both the sites
On a finishing note, as I am hosting the same site on two places, the disqus comments might lead to confusion if at all someone cared to comment. So to make things easy for that blessed soul I made sure the comments are reflected in both the sites.
disqus_identifier is the trick.
1 <div id="disqus_thread"></div>
2 <script type="text/javascript">
3 /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
4 var disqus_shortname = ''; // required: replace example with your forum shortname
5 var disqus_identifier = '_posts/2014-08-02-It-has-begun.md'; //This is the magic part.
6 //Make sure this is same for both the pages (posts) so you can comment across both the pages
7 //I used the post path.
8 /* * * DON'T EDIT BELOW THIS LINE * * */
9 (function() {
10 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
11 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
12 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
13 })();
14 </script>
15 <noscript>Please enable JavaScript to view the <a href="http:/disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
16 <a href="http:/disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
Thanks.
comments powered by Disqus