I currently have [username]/github.io pages made with simple HTML/CSS.
Now I am trying to switch to Hugo to manage the sites more efficiently.
I understand that the Hugo (the static site generator) generates public directory which I can just copy the contents to [username]/github.io repository.
However, in this way, I have to have two different repositories to keep the Hugo project itself and the website that had generated.
What would be the correct way to keep the repositories for Hugo?
I believe in Jekyll, the pushed project will generate the github.io pages in the server side of GitHub.
For the Hugo projects, should I have to have two different repositories, one for the Hugo and the other for the generated sites?
You may need two repositories, one for Hugo’s content, and a second one that will be a git submodule with the public folder’s content in it.
Check the Hugo docs Host on Github Step-by-step Instructions:
Create a <YOUR-PROJECT> (e.g. blog) repository on GitHub. This repository will contain Hugo’s content and other source files.
Create a <USERNAME>.github.io GitHub repository. This is the repository that will contain the fully rendered version of your Hugo website.
git clone <YOUR-PROJECT-URL> && cd <YOUR-PROJECT>
Make your website work locally (hugo server or hugo server -t ) and open your browser to http://localhost:1313.
Once you are happy with the results:
Press Ctrl+C to kill the server
rm -rf public to completely remove the public directory
git submodule add -b master git#github.com:<username>/<username>.github.io.git public. This creates a git submodule. Now when you run the hugo command to build your site to public, the created public directory will have a different remote origin (i.e. hosted GitHub repository). You can automate some of these steps with the following script.
Related
I am new to coding area, and started learning coding since last few days; I have completed some projects.
But, when I want to upload and live it on GitHub platform, it is just showing the repository name when going to the created link.
I manually uploaded 1 file of CSS and HTML each, its showing problem.
If you have your projects set up as nested Git repository inside your main local repository, then you would see those subrespo root folder as links (gitlinks, a special entry in the index) indeed.
myProjects
.git/
project1
.git/
project2
.git/
...
Make sure to create one GitHub repository per project.
You can do so from your workstation, using the GitHub CLI gh, with gh repo create:
# create a remote repository from the current directory
gh repo create my-project --source=.
I'm hosting a site on Github pages, and using Jekyll to generate it.
I added Angular and Lodash to my project using npm, but didn't want to upload 200 odd files to GitHub so I added node_modules to my .gitignore file and just made sure they were added as dependencies within package.json. The problem then becomes that GitHub pages/Jekyll doesn't auto-install the packages when it (Jekyll) generates.
So my question is, how can I use NPM on GitHub pages without actually uploading my node_modules folder into my GitHub repository?
You have two options:
build your site locally
Just generate your static files locally and then upload the final website to Github pages (Github can host non Jekyll websites)
use CI
Implement a script that after uploading your files to the master branch (in Travies for example), it builds your site and push the changes to the gp-pages branch.
According to the GitHub, you can add a _config.yml file to tell Jekyll to "include" the "node_modules" and "vendors" directories.
See:
https://help.github.com/en/articles/configuring-jekyll
I created a GitHub Pages from a repository using the web interface in GitHub. So I have my project webpage served at https://username.github.io/repo/. Now I would like to export all the files that form it - which are not available in my repository - (index.html, /css, ...) into a project folder that contains the entire website.
How can I do that?
You need to build the Jekyll site locally:
Clone you repo
Clone the github repo with git clone githubrepo. Then enter the directory cd githubrepo
Build the site
Install jekyll in your computer and execute jekyll build, the current folder will be generated into ./_site
All your website files will be located in the _site directory.
I'm using Jekyll and GitHub Pages to create documentation for projects that live in separate repos that are part of an organization account in GitHub. My team has decided it makes the most sense for the docs to live in each repo alongside the code, so we'll be using a gh-pages branch in each repo.
I will also be setting up a separate gh-pages repo from the organization account to serve as a landing page. I'd like to have all of my jekyll config items live in this repo. What do I need to put in the config file in each of the repos to successfully pull all of the layouts, css/scss, etc. from this central location? Is this even possible?
Here's a visual representation
In a nutshell, I'm trying to have one place where I can make changes to the website formatting files instead of 6.
On Github pages, you can use resources from another repository by using git submodules.
This works well for _layouts and _sass, but sadly not for _includes. This due to the fact that, in Jekyll 2.x, you cannot configure _includes folder path. This has been committed in the current master and will be available as soon as Jekyll 3 is out and used by github pages.
Edit: With Jekyll 3, you can now configure includes_dir: _mydir. See documentation for Jekyll configuration.
An interim solution can be to merge includes in layouts until you're able to configure _includes path. Not so clean, but, as your templates a centralized, it will be easy to refactor.
Howto
1 - create a resources repository
Adding your organization repository as a submodule will pull both resources, post and pages. Not a good way to go because posts and pages will be present in your project blogs.
The better way is to hosts your resources (_includes, _layouts, _sass, css) in a dedicated repository at github.com/userName/resources.
In your _layouts/default.html, dont forget to call you css with :
<link rel="stylesheet" href="{{ "/resources/css/main.css" | prepend: site.baseurl }}">
2 - Project blog Setup
Create a project blog without resources files and add the resources submodule.
git submodule add https://github.com/userName/resources.git
This creates a resources folder in you repository.
Edit your _config.yml and add:
layouts: /resources/_layouts
sass:
sass_dir: /resources/_sass
You can now jekyll serve, it works.
3 - Resources workflow
As your resources are in a submodule, changes in a template or sass file will not be reflected in your blog automatically.
In order to refresh your blog you will have to do this for all your blogs.
git submodule update --remote
git commit -a -m 'resources update'
git push origin gh-pages
After getting feedback from my team, I ended up doing the following:
create new repo that will be the source of the GH-Pages site
add the individual project repos as submodules of this repo
add a script that tells jekyll to pull content from specific folders in the submodules and place them in a temp dir, then use that temp dir as the build source
#remove docs-build-temp folder if it exists
rm -rf ./docs-build-temp
#make temp-content folder
mkdir ./docs-build-temp
#copy content from doc folder in submodules into temp-content folder
cp -R ./submodule1/doc ./docs-build-temp/newdir1
cp -R ./submodule2/doc ./docs-build-temp/newdir2
#tell jekyll the content source
bundle exec jekyll build -s ./docs-build-temp
The script works when run locally and in Travis CI*.
*I set up ssh authentication between my user acct in github and each of the repos in travis to get around the fact that all of them are private. Seems to be working out ok so far.
I have two different static sites with different designs! I want to run them under 1 Jekyll server.. how to do it?
To be specific: here is my situation:
My github repo has a gh-pages branch. Now, my project needs two different sites (of course running under same root with sub folders).
documentation site - should run at username.github.com/repo/doc/
Testing site - should run at username.github.com/repo/test/
each of these two sites have their own _includes, _layouts, static files etc.. those two are completely different..
How do I setup such a project..
This is simple if you are willing to build the sites locally by running Jekyll first, and then pushing the contents of _site to the respective directories on the gh-pages branch of your repo.
In the github repo called "repo", just create a gh-pages branch with the directories doc and test. Copy the contents of _site generated by running Jekyll on each of your separate Jekyll projects (which can live wherever you want) to doc/ and test/ and voila.
I do not believe you can trick github into running jekyll twice on the same repo to compile the different sites as sub-folders. However, simply by using different layouts in _layouts (pointing to different css files, etc) you can make two completely separate webpages appear as you want them to be -- I don't see why it is strictly necessary (other than simple preference) to maintain them as separate Jekyll projects. (This approach would allow you to just push your changes and let github run Jekyll and build the site).