Adding a project to my main site (2 GitHub repos)

Support
1

I’m attempting to create a Netlify home page and add a blog project, as described here: [Support Guide] Can I deploy multiple repositories in a single site?.

I have my Netlify homepage set up at https://www.coloradomollybrown.com/.

My blog page is set up at https://coloradomollybrown.netlify.app/

Locally, I’ve changed some of my root files to append /blog/, so I access it via localhost:3000/blog/, and localhost:3000/ throws an error. For some reason, this doesn’t seem to be getting applied to my blog netlify app, and instead it’s being accessed without the /blog/ at the end. Is my project structure set up incorrectly?

As an add-on, I don’t know how much it is needed for me to get https://coloradomollybrown.netlify.app/blog working, but I am definitely running into re-direct issues using this _redirects in build/ on my home website repo:

/blog/* https://coloradomollybrown.netlify.app/:splat 200

2

Hey @nhicap19,
Homepage here: inspiring-bohr-332076.netlify.app,
Repo here: GitHub - mollybrowntown/mollybrowntown.github.io

Blog here: coloradomollybrown.netlify.app,
Repo here: GitHub - mollybrowntown/blog

You’re heading in the right direction with that setup :tada:

Here’s what you’ll want to do next:

  1. Get the blog deploying correctly on its own Netlify site. I don’t see a netlify.toml file in that repo or any build settings in the UI, so part of the problem is that we’re probably not running the correct build command or publishing the right directory.

    What does this mean? Per step 1 in the guide you linked, everything in here: GitHub - mollybrowntown/blog needs to be in one directory called blog. Inside blog, you’ll have src, public, etc. The netlify.toml for that will be in the root directory and will look something like:

    build = "npm run build"
publish = "blog/public/"

  2. Once that is working (and you’ll know because coloradomollybrown.netlify.app/blog/ will show your live blog), the redirect you listed above should work with a small change:
    /blog/* https://coloradomollybrown.netlify.app/blog/:splat 200!

Want to give that a shot and let us know how it goes?

3

Hi @jen ,

I’ve got a netlify.toml file added, as well as a blog folder with src and and public folders moved inside of it. I am getting a blank page at coloradomollybrown.netlify.app/blog/ when I deploy it. I also can no longer get the blog going locally because npm can’t find the index.html.

Nhi

4

Have you made sure that your netlify.toml is in the root directory? Does your deploy log successfully show that it can see the netlify.toml file?

5

Hi @Scott,

By root directory, do we mean the main repository outside of the newly created blog, sub-dir, or do we actually take the root as being the new-dir?

It appears that npm run build command is failing because it can’t find the index.html path in the root dir. It is looking in /opt/build/repo/public How do I update the path to the index.html file? Currently testing as it stands, my directory structure looks like

Repo (blog)
|_netlify.toml
|_blog
----|_public
----|_src
----|_build
----|_package.json
----|_package-lock.json
----|_node_modules

Thanks,

Nhi

6

Hey @nhicap19,

With that structure, I’d assume that:

Base directory: /
Publish directory: blog/_public
7

Hi @Scott,

Ok, so in that case:

If my base directory is the repo blog/. and the subdir inside of that is /blog/, which contains public, src, etc. I need to move the package.json, package-lock.json, and node_modules to the base directory? When I run a npm run build in the base directory, it has no knowledge of the index.html file placed in my sub-dir containing the public folder. How do I get around this?

So based on your answer, I need to do this? How do I point my build to the index,html nested inside of the subdir?
Repo (blog)
|_netlify.toml
|_build
|_package.json
|_package-lock.json
|_node_modules
|_blog
----|_public
----|_src

Netlify app log:
9:44:25 AM: │ 1. build.command from netlify.toml │

9:44:25 AM: └────────────────────────────────────┘

9:44:25 AM: ​

9:44:25 AM: $ npm run build

9:44:26 AM: > blog@1.0.0 build /opt/build/repo

9:44:26 AM: > react-scripts build

9:44:27 AM: Could not find a required file.

9:44:27 AM: Name: index.html

9:44:27 AM: Searched in: /opt/build/repo/public

9:44:27 AM: npm ERR! code ELIFECYCLE

9:44:27 AM: npm ERR! errno 1

9:44:27 AM: npm ERR! blog@1.0.0 build: react-scripts build

9:44:27 AM: npm ERR! Exit status 1

9:44:27 AM: npm ERR!

9:44:27 AM: npm ERR! Failed at the blog@1.0.0 build script.

9:44:27 AM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

9:44:27 AM: npm ERR! A complete log of this run can be found in:

9:44:27 AM: npm ERR! /opt/buildhome/.npm/_logs/2020-07-02T15_44_27_320Z-debug.log

9:44:27 AM:

Nhi

8

Hey @nhicap19,

Your setup looks fine. You have your netlify.toml, node_modules and package.json in your base directory. Do you have an index.html in your public directory?

In my past post, I said your publish directory should be blog/_public. This is wrong, it should be blog/public.

9

Hey @Scott,

Yup, I have an index.html file under repo/blog/public/. We’ll note that in the log file,

9:44:27 AM: Searched in: /opt/build/repo/public

It is looking in /opt/build/repo/public but I want it to look in /opt/build/repo/blog/public. How do I trigger that?

10

Ahhh, I see. We’re using react-scripts build as the build command. We might have a bit more luck if we set:

Base directory: blog
Publish directory: blog/_public *(blog/ will auto-populate)*

The reason we need to change this up is because of react’s anticipated folder structure!

11

Hey @Scott,

Everything is building correctly, just getting a page not found on https://coloradomollybrown.netlify.app/blog. I can get npm run start to pull up localhost:3000/blog, though.

A note: My app will only build using the following settings and structure:
Repo (blog)
|_netlify.toml
|_blog
----|_public
----|_src
----|_build
----|_package.json
----|_package-lock.json
----|_node_modules

netlify.toml:
[build]
command = “npm run build”
publish = “public/”

[[redirects]]
from = “/*”
to = “/index.html”
status = 200

UI settings:
Base directory: blog
Publish directory: blog/blog/public

I can only run npm run start from blog/blog. And not from the repo root directory, since the build only works for me when I have the package.json, build/, node_modules in blog/blog.

Nhi

13

Hey @Scott,

I also added a _redirects file to public. That makes the “Page not found” error go away, but doesn’t resolve the app not getting pulled up. I get a blank white page. I am absolutely puzzled as to how I can get this locally at the route provided, but not via Netlify.

Nhi

14

At this point, it may just be the redirect! You’ll want to make sure you’re proxy redirecting to /blog/index.html. As per the guide, for a _redirects file, it’d be like /blog/* https://yourblogsite.netlify.com/blog/:splat 200!

15

Hey @Scott,

That redirect you listed is for connecting two different netlify apps. I’m still stuck on the first part with getting Netlify to pull up my blog under the subdirectory in my repo. I can’t figure out how to load everything into a sub-directory and have it correctly show on Netlify deploy.

Nhi

16

Hey @Scott,

Looks like I have resolved my issue with the blank blog app using the solution here, of changing the homepage value in my package.json. Definitely an odd workaround.

So now I’m at the stage where I can start merging the two:

https://coloradomollybrown.netlify.app/blog

with

https://www.coloradomollybrown.com/

It appears that when I navigate to https://www.coloradomollybrown.com/blog, I get some 404’s on the build/static files. So it’s trying to access the blogs static js/css files, but navigating through the main page’s hostname. Any ideas on how to point that to the correct hostname for the static folder?

Request URL:https://www.coloradomollybrown.com/static/css/main.e5d9d2d5.chunk.css

Request method:GET

Status code:

404

Should be reaching: https://coloradomollybrown.netlify.app/static/css/main.e5d9d2d5.chunk.css instead

17

Woohoo! Awesome stuff! Congrats, nice work :smile:!

You could add a proxy rewrite to the site to proxy the content, such as:

/static/* https://coloradomollybrown.netlify.app/static/:splat 200

18

Hey @Scott,

That worked perfectly. I was initially worried this would cause an unnecessary redirect in loading the main page’s static files, but that is not the case.

Thanks for your help through this!

1 Like