Why does AWS Amplify mangle my static site? - jekyll

First, let me say that I'm not a webpage designer. Far from it. I'm an embedded engineer. 8-) But, I've been using Jekyll to try and create a static webpage. In addition, I'm using AWS Amplify to deploy the webpage. I think that I have the process down. But, my page gets mangled when going from jekyll serve to Amplify.
I started from using the Jekyll clean theme https://github.com/scotte/jekyll-clean. Works great when I look at it from jekyll serve. Yet, when I look at it from my Amplify URL, https://master.d3e4src368zkzo.amplifyapp.com/ it looks really bad..
I could really use some insight into where to look for why this problem happens.. Seems like something easy but this is all so new to me..

All you resources urls contains jekyll-clean.
I guess it comes from your baseurl that might be set to jekyll-clean.
In your _config.yml, you must read :
url: "https://master.d3e4src368zkzo.amplifyapp.com"
baseurl: ""

Related

Best way to add a Hugo blog to an existing static site?

The Situation
I have a website hosted on Netlify that consists of HTML and CSS files only. Let's call it "domain.com".
I want to keep that website the same, but add a Hugo blog only on "domain.com/blog/".
What I've Tried
I've created a folder called "blog" in my "domain.com" repository and copied over all of the Hugo stuff. Then I go to Netlify's build settings and told it use Hugo to build it. I don't think this works because it's looking for a config.toml file in my root folder, which isn't there, it's in the blog folder.
Then I tried creating a new Netlify site build from the /blog/ directory of the repository with the build setting "hugo --gc --minify". This doesn't work either and definitely doesn't put the the blog at "domain.com/blog/".
What I'm Wondering Now
Is this even possible?
Would I have to just start the whole thing from scratch and start from Hugo?
Is there a better way to create a CMS on "domain.com/blog/" that's free and not Hugo?
Since asking this question I have realized that it's not a good question. I'll keep it up though in case somebody has the same thought process as I did. It's not about getting Hugo onto an existing site, it's about getting your existing site onto Hugo.
I ended up porting my existing index.html and other pages with CSS over to Hugo. Basically I just copied those into the root of my Hugo site so they look exactly the same as they did before.
The only thing that is really generated by Hugo is the blog, which is the end result I needed.

Why won't Github Pages serve my documentation?

I use sphinx to build html documentation, and am in the middle of open-sourcing some of my company's private repos.
Internally, we serve documentation from an S3 bucket through Cloudfront so we can put access controls in front of it. But for open source, I figured publishing via Github Pages would be the path of least resistance.
However, I cannot get the service to work correctly.
Here is my repo, with my index.html in the /docs folder.
Here is the site, which is not applying any of the linked css, and with all page links broken.
I tried to isolate the issue by making a test repo with just the built documentation, and publishing from master.
As you can see, this one does not even try to serve the index.html, I just get a 404 page.
These files work both locally and when serving from AWS, so I'm a little at a loss for why Github Pages is not serving it correctly. I feel like I must be making some sort of dumb oversight. If anyone with more experience could take a look and point me toward the error of my ways I would really appreciate it. I'm a backend engineer for the most part so website logic is a little outside my normal wheelhouse. Thanks in advance!
To anyone else running into the same thing, I figured it out. Because I am pre-building the site in my CI/CD pipeline, I don't need jekyll to build the site for me, and need to add an empty config file for it.
From [here][https://www.docslikecode.com/articles/github-pages-python-sphinx/]:
Next, you set up the .nojekyll file to indicate you aren’t using
Jekyll as your static site generator in this repository.
Thank you for your help!
You need a _config.yml, and you need to enable github pages on Master for the repo (go to settings). After that, you also need a Gemfile it the following:
source 'https://rubygems.org'
gem 'github-pages'
Normally, the GitHub pages site needs to be in the root, and yours looks like it's in a /docs folder, so I'm sure you can Google how to do that. It might not be possible though with GH pages, I'm not sure.
If it must be a subfolder and not the root of the project maybe something like this would work: https://gist.github.com/cobyism/4730490
Heres whats in my _config: for barebones sites:
permalink: pretty
sass:
sass_dir: _scss
style: compressed
I'm sure you can leave sass out

Baseurl and url config didn't work for jekyll on github

I'm new to jekyll and I'm trying to figure out how to make the config 'baseurl' and 'url' work on github
I set to config like this in _config.xml:
baseurl: /documentation
url: https://michaelpw.github.io/
However, when I open this page https://michaelpw.github.io/documentation/, it displayed the error 404 not found.
Anybody knows what went wrong? I tested on local and everything worked fine.
Currently your site is being deployed to https://michaelpw.github.io/.
To have it at https://michaelpw.github.io/documentation/, you need to move the site to a separate repository named documentation instead of michaelpw.github.io.
I think that the meaning of Base Url is not crystal clear. Please, review this link
If you want to set up a base url, you need to create a new Jekyll site in Github -> Follow these steps

Local Jekyll Serve/Live Site discrepancy

I am creating a jekyll blog to host on my github.io account using a theme. The problem is simple: when I run 'jekyll serve' the site generates locally as it should with no issues. However, when I push it to my_profile.github.io repository, it is breaking online.
I'm confused as to why this is happening. I found one other question here on stack: Locally building and pushing jekyll site to github pages. An answerer recommends pushing only the _site folder of jekyll that gets auto-generated. However, that didn't solve it for me.
Link to my repo if anyone wants to take a stab:
https://stackoverflow.com/questions/36377865/locally-building-and-pushing-jekyll-site-to-github-pages
Link to broken live page: https://spirited-away.github.io/
Any ideas appreciated!
Looks like you're requesting assets with http://, but serving your site on https://. Browsers don't like that. Use your browser developer tools to see the errors.
Although I can't be sure without a repo URL, you've probably got something like this set in your _config.yml:
url: http://spirited-away.github.io/
Change it to:
url: https://spirited-away.github.io/

How to change paths and URLs in Jekyll?

I am very new to Jekyll and I am failing to find configuration to change the following:
I built a basic Jekyll site using jekyll new . and ran jekyll serve to learn and built a layout using Jekyll. The basic test site gives me the following URL for posts: /jekyll/update/2016/01/30/welcome-to-jekyll.html. Is the URL like that because I am running jekyll serve and not jekyll build? I want to remove the the jekyll/update from the URL path, so my final URLs for posts look like the following: /2016/01/30/welcome-to-jekyll.html.
I want my pages to be stored in a separate directory _pages instead of the root directory. How can I do that?
Is there way to prepend a path to files loaded from a specific directory? For example, I want to make a /_projects directory. Then add files with the following permalinks: /prj-test1, /prj-test2, /prj-test3. When compiled, I want to get the following URLs: /projects/prj-test1, /projects/prj-test2, /projects/prj-test3, respectively. Is this possible?
Yes, everything you asked is possible.
Take a look at these examples, you might want to choose one of them. But to do as you asked, you'll need to change the permalink to /:year/:month/:day/:title.html. To do that, add this line to your _config.yml file:
permalink: /:year/:month/:day/:title.html
It depends on the structure you want to achieve. You can use collections or simply create pages inside a folder called pages (without the underscore).
Yes. You can do that via collections, for example.
I recommend you to take a look at some templates, so you can see how the code works in different ways:
Try some Jekyll Themes here and here. Download them and study their structures.
If you want to go deep, take a look how Jekyll build its own website.
Hope to have helped!